/* ========================================================================== SHAMWARI UNIFIED STYLES ========================================================================== This file consolidates all page-specific and global custom CSS from: - asset_exchange.html - shamwari_pay.html - subscriptions.html - insurance.html - dashboard.html - digital_certificates.html - messages.html - domains.html - style.css Load this AFTER shamwari.css (which contains Bootstrap 5 + Material Dashboard 3) ========================================================================== */ /* -------------------------------------------------------------------------- GLOBAL UTILITIES & ANIMATIONS -------------------------------------------------------------------------- */ /* Loading dots animation (used across many pages) */ .loading_dots span { animation: loadingDots 1.4s infinite both; display: inline-block; } .loading_dots span:nth-child(2) { animation-delay: 0.2s; } .loading_dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes loadingDots { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } } /* Spinner used in various data-loading containers */ .ae-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid rgba(201,168,76,.15); border-top-color: var(--ae-gold, #c9a84c); border-radius: 50%; animation: ae-spin .7s linear infinite; } @keyframes ae-spin { to { transform: rotate(360deg); } } /* Page transitions */ .page { display: none; margin-top: 2rem; } .page.active { display: block; } /* Responsive table adjustments (from style.css) */ @media (max-width: 600px) { #dashboard_page .small-box { height: 110px; } #dashboard_page .small-box > .inner { padding: 5px; } #dashboard_page .small-box h3 { font-size: 23px; white-space: normal; } #dashboard_page .small-box p { display: inline !important; } #dashboard_page .small-box > .small-box-footer { position: absolute; width: 100%; bottom: 0; } #dashboard_page .content, #dashboard_page .row, #dashboard_page .panel-body { margin: 0; padding: 0; } #dashboard_page .data-container th, #transactions_page .data-container th { display: none; } #dashboard_page .data-container tr, #transactions_page .data-container tr { display: flex; flex-wrap: wrap; justify-content: center; position: relative; } #dashboard_page .table-striped > tbody > tr:nth-of-type(odd), #transactions_page .table-striped > tbody > tr:nth-of-type(odd) { background: #eee; } #dashboard_page .data-container td, #transactions_page .data-container td { display: block; width: 33% !important; box-sizing: border-box; text-align: center; font-size: 12px; padding: 15px 3px !important; border: 0 !important; background: none !important; } #dashboard_page [data-column-title]:before, #transactions_page [data-column-title]:before { font-weight: bold; content: attr(data-column-title) ": "; } #dashboard_page .data-container td:nth-child(1) { order: 1; padding: 15px 0 0 15px !important; } #dashboard_page .data-container td:nth-child(1) .show_transaction_modal_action, #transactions_page .data-container td:nth-child(1) .show_transaction_modal_action { white-space: normal; } #dashboard_page .data-container .transaction-has-message, #transactions_page .data-container .transaction-has-message { position: absolute; left: 0; width: 0% !important; } #dashboard_page .data-container .transaction-type, #transactions_page .data-container .transaction-type { white-space: normal !important; } #dashboard_page .data-container .transaction-has-message .fa-envelope, #transactions_page .data-container .transaction-has-message .fa-envelope { top: 0; left: 0; position: absolute; border-bottom: 35px solid transparent !important; border-left: 35px solid #337ab7 !important; height: 0; } #dashboard_page .data-container .transaction-has-message .fa-envelope:before, #transactions_page .data-container .transaction-has-message .fa-envelope:before { margin: 6px 0 0 -46px; transform: rotate(-45deg); display: block; color: #fff; } #dashboard_page .data-container td:nth-child(3) { order: 3; width: 22% !important; background: #337ab7 !important; color: #fff; padding: 5px 9px !important; } #dashboard_page .data-container .transaction-amount { order: 4; white-space: nowrap; position: absolute; left: 15px; bottom: 23px; text-align: left !important; font-size: 16px; } #dashboard_page .data-container td:nth-child(5) { order: 5; } #dashboard_page .data-container td:nth-child(6) { order: 6; } #dashboard_page .data-container td:nth-child(7) { order: 2; width: 45% !important; } #dashboard_page .data-container td:nth-child(7) .show_popover { text-align: center !important; border: none !important; background-color: transparent !important; } #dashboard_page .data-container td:nth-child(7) .label { display: block !important; } #dashboard_page .data-container .transaction-height { display: none; } #dashboard_page .data-container td:nth-child(8) .show_popover { margin: 0 0 15px; } #dashboard_page .data-container .confirmations { order: 7; text-align: right !important; } .regular-view { display: none; } .mobile-view { display: initial !important; } #account_details_modal .regular-view { display: initial; } #account_details_modal .mobile-view { display: none !important; } #dashboard_page .data-container .confirmations.confirmations-show-bar-mobile-view, #transactions_page .data-container .confirmations.confirmations-show-bar-mobile-view { width: 100% !important; padding: 0 !important; } #dashboard_page .data-container .confirmations.confirmations-show-bar-mobile-view .mobile-view .confirmations-bar-ul, #transactions_page .data-container .confirmations.confirmations-show-bar-mobile-view .mobile-view .confirmations-bar-ul { width: 100%; display: flex; } #dashboard_page .data-container .confirmations .mobile-view .confirmations-bar-li, #transactions_page .data-container .confirmations .mobile-view .confirmations-bar-li { width: 10%; } #dashboard_page .confirmations.confirmations-show-bar-mobile-view[data-column-title]:before, #transactions_page .confirmations.confirmations-show-bar-mobile-view[data-column-title]:before { content: ""; } @keyframes slide { 0% { transform: translateX(-25%); } 100% { transform: translateX(25%); } } #transactions_type_navi { clear: both; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; } #transactions_type_navi li:nth-child(9) { flex-basis: 100%; text-align: center; } #transactions_type_navi li a { padding: 9px; } #transactions_sub_type_navi { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 9px; } #transactions_sub_type_navi li { flex-basis: 49%; font-size: 12px; } #transactions_sub_type_navi li > a { padding: 9px 5px; } .all-changed-filter { display: flex; float: right; } } @media screen and (max-width: 480px) { #nrs_node_state_table tr td { display: inline-block; width: 50%; } #nrs_node_state_table tr td:nth-child(2n+1), #nrs_node_state_table tr td:nth-child(2n+2) { background-color: #fff; } #nrs_node_state_table tr td:nth-child(2n+3), #nrs_node_state_table tr td:nth-child(2n+4) { background-color: #f3f4f5; } } @media print { .left-side, .header, .content-header { display: none; } } /* Chat styles (from style.css) */ .chat-container { max-height: 400px; overflow-y: auto; } .message-bubble { max-width: 75%; word-wrap: break-word; } .chat-message.incoming .message-bubble { background-color: #f8f9fa; border: 1px solid #e9ecef; } .chat-message.outgoing .message-bubble { background: linear-gradient(195deg, #49a3f1, #1A73E8); color: white; } .chat-message.outgoing { justify-content: flex-end; } .message-bubble p { margin-bottom: 0; } #message_details::-webkit-scrollbar { width: 6px; } #message_details::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } #message_details::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; } #message_details::-webkit-scrollbar-thumb:hover { background: #555; } @media (max-width: 768px) { .message-bubble { max-width: 85%; } #messages_sidebar { max-height: 300px; overflow-y: auto; } } /* Contacts page (from style.css) */ .contact-avatar { width: 36px; height: 36px; background: linear-gradient(195deg, #49a3f1, #1A73E8); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; } .btn-group .btn { margin-right: 4px; } .btn-group .btn:last-child { margin-right: 0; } @media (max-width: 768px) { #contacts_table th:nth-child(3), #contacts_table td:nth-child(3), #contacts_table th:nth-child(4), #contacts_table td:nth-child(4) { display: none; } .btn-group { flex-direction: column; gap: 4px; } .btn-group .btn { margin-right: 0; margin-bottom: 4px; } } /* Webpage application styles (from style.css) */ #user_info_modal .modal-fullscreen { margin: 0; max-width: 100%; height: 100vh; } #user_info_modal .app-header { position: sticky; top: 0; z-index: 1030; height: 60px; } #user_info_modal .app-body { min-height: calc(100vh - 120px); } #user_info_modal .app-sidebar { width: 280px; min-width: 280px; overflow-y: auto; height: calc(100vh - 120px); position: sticky; top: 60px; } #user_info_modal .sidebar-nav { max-height: calc(100vh - 400px); overflow-y: auto; } #user_info_modal .app-main { overflow-y: auto; height: calc(100vh - 120px); } #user_info_modal .breadcrumb { background: transparent; padding: 0; } #user_info_modal .card { border-radius: 1rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); transition: box-shadow 0.2s ease; } #user_info_modal .card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); } #user_info_modal .card-sm { border-radius: 0.75rem; } #user_info_modal .bg-gradient-primary { background: linear-gradient(195deg, #5e72e4 0%, #825ee4 100%); } #user_info_modal .bg-gradient-success { background: linear-gradient(195deg, #2dce89 0%, #2dcecc 100%); } #user_info_modal .bg-gradient-info { background: linear-gradient(195deg, #11cdef 0%, #1171ef 100%); } #user_info_modal .bg-gradient-warning { background: linear-gradient(195deg, #fb6340 0%, #fbb140 100%); } #user_info_modal .bg-gradient-dark { background: linear-gradient(195deg, #42424a 0%, #191919 100%); } #user_info_modal .avatar-xxl { width: 120px; height: 120px; } #user_info_modal .avatar img { object-fit: cover; } #user_info_modal .nav-pills .nav-link { border-radius: 0.75rem; padding: 0.75rem 1rem; transition: all 0.2s ease; color: #67748e; } #user_info_modal .nav-pills .nav-link:hover { background-color: rgba(94,114,228,0.1); color: #5e72e4; } #user_info_modal .nav-pills .nav-link.active { background: linear-gradient(195deg, #5e72e4 0%, #825ee4 100%); color: white; box-shadow: 0 3px 5px -1px rgba(94,114,228,0.15); } #user_info_modal .table th { font-size: 0.75rem; letter-spacing: 0.05em; border-bottom: 1px solid #e9ecef; padding: 1rem 1.5rem; } #user_info_meta .table td { vertical-align: middle; padding: 1rem 1.5rem; } #user_info_modal .table tbody tr { border-bottom: 1px solid #f2f2f2; } #user_info_modal .table tbody tr:hover { background-color: rgba(94,114,228,0.04); } #user_info_modal ::-webkit-scrollbar { width: 6px; height: 6px; } #user_info_modal ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } #user_info_modal ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; } #user_info_modal ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } #user_info_modal .color-icon { width: 16px; height: 16px; } @media (max-width: 992px) { #user_info_modal .app-sidebar { position: fixed; left: -280px; top: 60px; z-index: 1040; transition: left 0.3s ease; } #user_info_modal .app-sidebar.show { left: 0; } #user_info_modal .app-main { width: 100%; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } #user_info_modal .tab-pane.active { animation: fadeInUp 0.3s ease; } #user_info_modal .spinner-border { width: 3rem; height: 3rem; } #user_info_modal .empty-state { padding: 4rem 1rem; text-align: center; } #user_info_modal .empty-state i { font-size: 4rem; margin-bottom: 1.5rem; color: #dee2e6; } #user_info_modal .app-footer { height: 60px; position: sticky; bottom: 0; z-index: 1030; } /* Voting system enhancements (from style.css) */ .poll-card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border: none; } .poll-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .poll-option .form-control:focus { border-color: #94a3b8; box-shadow: 0 0 0 0.2rem rgba(94,114,228,0.25); } .btn-icon-only { padding: 0.5rem; min-width: auto; } .avatar { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; text-align: center; vertical-align: middle; text-transform: uppercase; } .avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.5rem; } .avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; } .avatar-xl { width: 5rem; height: 5rem; font-size: 1.75rem; } .input-group-dynamic { position: relative; } .input-group-dynamic .form-control { border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 0.75rem 0.75rem 0.375rem 0.75rem; height: auto; } .input-group-dynamic .form-label { position: absolute; top: 0.75rem; left: 0.75rem; transition: all 0.2s ease-in-out; color: #6c757d; font-size: 0.875rem; margin-bottom: 0; } .input-group-dynamic .form-control:focus ~ .form-label, .input-group-dynamic .form-control:not(:placeholder-shown) ~ .form-label { top: -0.5rem; left: 0.5rem; font-size: 0.75rem; color: #5e72e4; background: white; padding: 0 0.25rem; } .chart-container { position: relative; height: 300px; margin-bottom: 1rem; } .table th { font-weight: 600; color: #495057; border-top: none; } .table td { vertical-align: middle; } .badge { font-size: 0.75rem; padding: 0.5rem 0.75rem; } .modal-header { border-bottom: 1px solid rgba(255,255,255,0.1); } .modal-footer { border-top: 1px solid #dee2e6; } .form-control.is-invalid { border-color: #f5365c; } .form-control.is-valid { border-color: #2dce89; } .invalid-feedback { display: block; width: 100%; margin-top: 0.25rem; font-size: 0.875rem; color: #f5365c; } .list-group-item.active { background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%) !important; border-color: #5e72e4; } .list-group-item:hover:not(.active) { background-color: #f8f9fe; } .data-loading { position: relative; min-height: 200px; } .data-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border: 0.25rem solid #f3f3f3; border-top: 0.25rem solid #5e72e4; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .poll-card .btn-group { flex-direction: column; } .poll-card .btn { margin-bottom: 0.25rem; } } .card-app { transition: all 0.3s ease; border: 1px solid transparent; cursor: pointer; } .card-app:hover { transform: translateY(-5px); box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.15) !important; border-color: var(--bs-primary); } .modal-body::-webkit-scrollbar { width: 8px; } .modal-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 10px; } .modal-body::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--bs-primary), var(--bs-info)); border-radius: 10px; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- PAGE-SPECIFIC STYLES (scoped by page ID) -------------------------------------------------------------------------- */ /* ===== Asset Exchange Page ===== */ #asset_exchange_page { --ae-gold: #c9a84c; --ae-gold-lt: #e8c96a; --ae-gold-dim: rgba(201,168,76,.14); --ae-card: #181c27; --ae-surf: #13161e; --ae-bdr: rgba(201,168,76,.2); --ae-txt: #e8e3d5; --ae-mut: rgba(232,227,213,.46); --ae-ok: #2ecc8a; --ae-warn: #e8a83c; --ae-err: #e05c5c; --ae-info: #5c9ee8; --ae-buy: #2ecc8a; --ae-sell: #e05c5c; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; background: var(--ae-surf); color: var(--ae-txt); font-family: var(--fu); min-height: 100vh; display: flex; flex-direction: column; } #asset_exchange_page .page-header { background: transparent !important; padding: 1.25rem 1rem .5rem; } #asset_exchange_page .page-header h2 { font-family: var(--fd); font-size: 1.55rem; color: var(--ae-gold) !important; letter-spacing: .02em; margin: 0; } #asset_exchange_page .page-header h2 i { color: var(--ae-gold) !important; } #asset_exchange_page .ae-layout { display: flex; flex: 1; gap: 0; min-height: 0; border: 1px solid var(--ae-bdr); border-radius: 8px; overflow: hidden; height: 75vh; } #asset_exchange_page #asset_exchange_sidebar { width: 230px; min-width: 200px; max-width: 260px; flex-shrink: 0; background: var(--ae-card); border-right: 1px solid var(--ae-bdr); display: flex; flex-direction: column; overflow: hidden; } #asset_exchange_page #asset_exchange_sidebar_search { padding: .6rem .75rem; border-bottom: 1px solid var(--ae-bdr); background: rgba(0,0,0,.15); display: none; } #asset_exchange_page #asset_exchange_sidebar_search .input-group { position: relative; display: flex; align-items: center; } #asset_exchange_page #asset_exchange_sidebar_search input[name=q] { background: rgba(255,255,255,.04) !important; border: 1px solid var(--ae-bdr) !important; border-radius: 8px !important; color: var(--ae-txt) !important; font-family: var(--fm); font-size: .76rem; padding: .35rem .7rem .35rem 2rem; width: 100%; transition: border-color .18s, box-shadow .18s; } #asset_exchange_page #asset_exchange_sidebar_search input[name=q]:focus { outline: none; border-color: var(--ae-gold) !important; box-shadow: 0 0 0 3px var(--ae-gold-dim) !important; } #asset_exchange_page #asset_exchange_sidebar_search input[name=q]::placeholder { color: var(--ae-mut) !important; } #asset_exchange_page .ae-search-icon { position: absolute; left: .55rem; color: var(--ae-mut); font-size: .75rem; pointer-events: none; } #asset_exchange_page #asset_exchange_clear_search { position: absolute; right: .5rem; color: var(--ae-mut); font-size: .75rem; cursor: pointer; text-decoration: none; display: none; } #asset_exchange_page #asset_exchange_clear_search:hover { color: var(--ae-gold); } #asset_exchange_page #asset_exchange_sidebar_content { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(201,168,76,.25) transparent; } #asset_exchange_page #asset_exchange_sidebar_content::-webkit-scrollbar { width: 4px; } #asset_exchange_page #asset_exchange_sidebar_content::-webkit-scrollbar-thumb { background: rgba(201,168,76,.25); border-radius: 2px; } #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item { display: block; padding: .55rem .85rem; border-bottom: 1px solid rgba(255,255,255,.04); text-decoration: none; cursor: pointer; transition: background .12s; position: relative; } #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item:hover { background: var(--ae-gold-dim); } #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item.active { background: rgba(201,168,76,.12) !important; border-left: 3px solid var(--ae-gold); } #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item h4 { font-family: var(--fu); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ae-mut) !important; margin: 0; } #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item:not(.font-weight-bolder) h4, #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item.ungrouped h4, #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item.grouped h4 { font-family: var(--fu); font-size: .8rem; font-weight: 600; color: var(--ae-txt) !important; letter-spacing: 0; text-transform: none; margin: 0 0 .15rem; } #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item.active h4 { color: var(--ae-gold) !important; } #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item p.list-group-item { font-family: var(--fm); font-size: .68rem; color: var(--ae-mut); margin: 0; padding: 0; background: transparent; border: none; } #asset_exchange_page #asset_exchange_sidebar_content a.list-group-item.owns_totem p { color: var(--ae-ok); } #asset_exchange_page #asset_exchange_sidebar_content .group_icon { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--ae-mut); font-size: .75rem; } #asset_exchange_page .ae-sidebar-footer { padding: .6rem .75rem; border-top: 1px solid var(--ae-bdr); background: rgba(0,0,0,.15); display: flex; gap: .4rem; } #asset_exchange_page .ae-sidebar-btn { flex: 1; background: rgba(201,168,76,.08) !important; border: 1px solid var(--ae-bdr) !important; color: var(--ae-gold) !important; border-radius: 7px; font-family: var(--fu); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .4rem; cursor: pointer; text-align: center; text-decoration: none; transition: all .14s; display: flex; align-items: center; justify-content: center; gap: .3rem; } #asset_exchange_page .ae-sidebar-btn:hover { background: var(--ae-gold-dim) !important; border-color: var(--ae-gold) !important; } #asset_exchange_page .ae-main { flex: 1; background: var(--ae-card); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; } #asset_exchange_page .ae-state-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 3rem 2rem; text-align: center; gap: .75rem; } #asset_exchange_page .ae-state-panel i { font-size: 2rem; color: rgba(201,168,76,.15); } #asset_exchange_page .ae-state-panel p { font-family: var(--fu); font-size: .84rem; color: var(--ae-mut); margin: 0; } #asset_exchange_page .ae-state-panel h5 { font-family: var(--fd); color: var(--ae-gold); font-size: 1rem; margin: 0; } #asset_exchange_page #totem_details { display: none; flex-direction: column; flex: 1; } #asset_exchange_page .ae-detail-header { background: var(--ae-card); border-bottom: 1px solid var(--ae-bdr); padding: 1rem 1.25rem .75rem; } #asset_exchange_page .ae-detail-header .ae-totem-title { font-family: var(--fd); font-size: 1.3rem; color: var(--ae-gold); letter-spacing: .03em; margin: 0 0 .2rem; display: flex; align-items: center; gap: .6rem; } #asset_exchange_page .ae-detail-header .ae-totem-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .45rem; } #asset_exchange_page .ae-meta-item { display: flex; flex-direction: column; } #asset_exchange_page .ae-meta-label { font-family: var(--fu); font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ae-mut); margin-bottom: .1rem; } #asset_exchange_page .ae-meta-value { font-family: var(--fm); font-size: .82rem; color: var(--ae-txt); } #asset_exchange_page .ae-meta-value.gold { color: var(--ae-gold); } #asset_exchange_page #asset_exchange_duplicates_warning { background: rgba(232,168,60,.08); border: 1px solid rgba(232,168,60,.25); border-radius: 8px; color: var(--ae-warn); font-family: var(--fu); font-size: .76rem; padding: .4rem .75rem; margin: .5rem 1.25rem 0; display: none; } #asset_exchange_page #totem_control_links { display: none; gap: .5rem; flex-wrap: wrap; padding: .45rem 1.25rem; background: rgba(0,0,0,.1); border-bottom: 1px solid rgba(255,255,255,.04); } #asset_exchange_page .ae-ctrl-link { font-family: var(--fu); font-size: .72rem; font-weight: 700; color: var(--ae-mut) !important; text-decoration: none; display: flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 6px; border: 1px solid transparent; transition: all .13s; } #asset_exchange_page .ae-ctrl-link:hover { background: var(--ae-gold-dim); border-color: var(--ae-bdr); color: var(--ae-gold) !important; } #asset_exchange_page .ae-order-panel { display: flex; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ae-bdr); } #asset_exchange_page .ae-order-box { flex: 1; background: var(--ae-card); border: 1px solid var(--ae-bdr); border-radius: 12px; overflow: hidden; } #asset_exchange_page .ae-order-box.buy-box { border-color: rgba(46,204,138,.25); } #asset_exchange_page .ae-order-box.sell-box { border-color: rgba(224,92,92,.2); } #asset_exchange_page .ae-order-box-header { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); } #asset_exchange_page .ae-order-box-header h6 { font-family: var(--fd); font-size: .9rem; margin: 0; letter-spacing: .03em; } #asset_exchange_page .buy-box .ae-order-box-header h6 { color: var(--ae-buy); } #asset_exchange_page .sell-box .ae-order-box-header h6 { color: var(--ae-sell); } #asset_exchange_page .ae-order-box-body { padding: .85rem 1rem; } #asset_exchange_page .ae-order-row { display: flex; gap: .5rem; margin-bottom: .6rem; } #asset_exchange_page .ae-order-field { flex: 1; display: flex; flex-direction: column; } #asset_exchange_page .ae-order-field label { font-family: var(--fu); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ae-mut); margin-bottom: .25rem; } #asset_exchange_page .ae-order-field input { background: rgba(255,255,255,.04) !important; border: 1px solid var(--ae-bdr) !important; border-radius: 8px !important; color: var(--ae-txt) !important; font-family: var(--fm); font-size: .82rem; padding: .38rem .65rem; width: 100%; transition: border-color .18s, box-shadow .18s; } #asset_exchange_page .ae-order-field input:focus { outline: none; border-color: var(--ae-gold) !important; box-shadow: 0 0 0 3px var(--ae-gold-dim) !important; } #asset_exchange_page .ae-order-field input::placeholder { color: var(--ae-mut) !important; } #asset_exchange_page .ae-balance-line { font-family: var(--fm); font-size: .72rem; color: var(--ae-mut); margin-bottom: .6rem; display: flex; align-items: baseline; gap: .35rem; } #asset_exchange_page .ae-balance-line .val { color: var(--ae-txt); } #asset_exchange_page .ae-balance-line.zero .val { color: var(--ae-err); } #asset_exchange_page .ae-buy-btn { background: linear-gradient(135deg, var(--ae-buy), #1a8a5a) !important; border: none !important; color: #0d0f13 !important; border-radius: 9px; font-family: var(--fu); font-size: .78rem; font-weight: 700; letter-spacing: .05em; width: 100%; padding: .55rem; box-shadow: 0 4px 16px rgba(46,204,138,.3); transition: all .17s; cursor: pointer; } #asset_exchange_page .ae-buy-btn:hover { background: linear-gradient(135deg, #3adc9a, var(--ae-buy)) !important; box-shadow: 0 6px 22px rgba(46,204,138,.45); transform: translateY(-1px); } #asset_exchange_page .ae-sell-btn { background: linear-gradient(135deg, var(--ae-sell), #a83232) !important; border: none !important; color: #fff !important; border-radius: 9px; font-family: var(--fu); font-size: .78rem; font-weight: 700; letter-spacing: .05em; width: 100%; padding: .55rem; box-shadow: 0 4px 16px rgba(224,92,92,.3); transition: all .17s; cursor: pointer; } #asset_exchange_page .ae-sell-btn:hover { background: linear-gradient(135deg, #f07070, var(--ae-sell)) !important; box-shadow: 0 6px 22px rgba(224,92,92,.45); transform: translateY(-1px); } #asset_exchange_page .ae-tables-row { display: flex; gap: 0; flex: 1; min-height: 0; } #asset_exchange_page .ae-order-book-col { flex: 1; border-right: 1px solid var(--ae-bdr); display: flex; flex-direction: column; min-height: 0; } #asset_exchange_page .ae-order-book-col:last-child { border-right: none; } #asset_exchange_page .ae-table-header { padding: .6rem 1rem; border-bottom: 1px solid var(--ae-bdr); display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,.1); } #asset_exchange_page .ae-table-header h6 { font-family: var(--fd); font-size: .88rem; color: var(--ae-gold); margin: 0; letter-spacing: .04em; } #asset_exchange_page .ae-table-header .ae-order-count { font-family: var(--fm); font-size: .68rem; color: var(--ae-mut); } #asset_exchange_page .table { color: var(--ae-txt) !important; font-family: var(--fu); font-size: .79rem; margin: 0; } #asset_exchange_page .table thead th { font-size: .61rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ae-gold) !important; font-weight: 700; border-bottom: 1px solid var(--ae-bdr) !important; background: transparent; padding: .65rem 1rem; white-space: nowrap; } #asset_exchange_page .table tbody td { border-color: rgba(255,255,255,.04) !important; padding: .6rem 1rem; vertical-align: middle; color: var(--ae-txt); } #asset_exchange_page .table tbody tr:hover { background: rgba(201,168,76,.04) !important; } #asset_exchange_page .table td.numeric { font-family: var(--fm); text-align: right; } #asset_exchange_page .ae-order-book-col .table thead th, #asset_exchange_page .ae-trade-history-col .table thead th { position: sticky; top: 0; z-index: 1; background: var(--ae-surf); } #asset_exchange_page .ae-order-book-col .table tbody tr.your-order { background: rgba(201,168,76,.06) !important; } #asset_exchange_page .ae-order-book-col .table tbody tr.your-order td { color: var(--ae-gold); } #asset_exchange_page #asset_exchange_trade_history_type { display: flex; gap: .3rem; } #asset_exchange_page #asset_exchange_trade_history_type .btn { background: rgba(255,255,255,.04) !important; border: 1px solid var(--ae-bdr) !important; color: var(--ae-mut) !important; border-radius: 7px; font-family: var(--fu); font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .25rem .65rem; transition: all .14s; cursor: pointer; line-height: 1; } #asset_exchange_page #asset_exchange_trade_history_type .btn:hover, #asset_exchange_page #asset_exchange_trade_history_type .btn.active { background: var(--ae-gold-dim) !important; border-color: var(--ae-gold) !important; color: var(--ae-gold) !important; } #asset_exchange_page .data-container { position: relative; } #asset_exchange_page .data-container .data-loading-container { display: none; } #asset_exchange_page .data-container .data-empty-container { display: none; } #asset_exchange_page .data-container.data-loading .data-loading-container { display: flex; } #asset_exchange_page .data-container.data-empty .data-empty-container { display: flex; } #asset_exchange_page .ae-inline-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: .5rem; } #asset_exchange_page .ae-inline-state i { color: rgba(201,168,76,.12); font-size: 1.5rem; } #asset_exchange_page .ae-inline-state p { font-family: var(--fu); font-size: .78rem; color: var(--ae-mut); margin: 0; } #asset_exchange_page #assetExchangeTabs { background: transparent !important; border-bottom: 1px solid var(--ae-bdr) !important; gap: .15rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 1.25rem; margin-bottom: 1rem; } #asset_exchange_page #assetExchangeTabs::-webkit-scrollbar { display: none; } #asset_exchange_page #assetExchangeTabs .nav-link { background: transparent !important; border: 1px solid transparent !important; border-bottom: none !important; border-radius: 10px 10px 0 0 !important; color: var(--ae-mut) !important; font-family: var(--fu); font-size: .74rem; font-weight: 600; letter-spacing: .04em; padding: .55rem .9rem !important; white-space: nowrap; transition: all .15s; } #asset_exchange_page #assetExchangeTabs .nav-link:hover { color: var(--ae-gold) !important; background: var(--ae-gold-dim) !important; } #asset_exchange_page #assetExchangeTabs .nav-link.active { background: var(--ae-gold-dim) !important; border-color: var(--ae-bdr) var(--ae-bdr) transparent !important; color: var(--ae-gold) !important; } #asset_exchange_page #assetExchangeTabs .nav-link i { font-size: .78rem; } #asset_exchange_page .ae-tabpage { background: var(--ae-card); border: 1px solid var(--ae-bdr); border-radius: 12px; overflow: hidden; padding: 0; margin-bottom: 1rem; } #asset_exchange_page .ae-select { background: rgba(255,255,255,.04) !important; border: 1px solid var(--ae-bdr) !important; border-radius: 8px !important; color: var(--ae-txt) !important; font-family: var(--fu); font-size: .8rem; padding: .38rem .65rem; min-width: 200px; } #asset_exchange_page .ae-select option { background: var(--ae-surf); color: var(--ae-txt); } #asset_exchange_page #asset_exchange_bookmark_this_totem { display: none; background: rgba(201,168,76,.1) !important; border: 1px solid var(--ae-bdr) !important; color: var(--ae-gold) !important; border-radius: 7px; font-family: var(--fu); font-size: .72rem; font-weight: 700; padding: .3rem .8rem; cursor: pointer; transition: all .13s; } #asset_exchange_page #asset_exchange_bookmark_this_totem:hover { background: var(--ae-gold-dim) !important; } #asset_exchange_page .ae-mobile-select { display: none; } @media (max-width: 768px) { #asset_exchange_page .ae-layout { flex-direction: column; height: auto; } #asset_exchange_page #asset_exchange_sidebar { width: 100%; max-width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid var(--ae-bdr); max-height: 280px; } #asset_exchange_page .ae-order-panel { flex-direction: column; } #asset_exchange_page .ae-tables-row { flex-direction: column; } #asset_exchange_page .ae-order-book-col { border-right: none; border-bottom: 1px solid var(--ae-bdr); } #asset_exchange_page .ae-mobile-select { display: block; padding: .5rem .75rem; } } /* ===== ShamwariPay (Currencies) Page ===== */ #currencies_page { --sp: #c9a84c; --sp-lt: #e8c96a; --sp-dim: rgba(201,168,76,.14); --sp-bdr: rgba(201,168,76,.2); --sp-card: #181c27; --sp-surf: #13161e; --sp-dark: #0d0f13; --sp-txt: #e8e3d5; --sp-mut: rgba(232,227,213,.46); --sp-ok: #2ecc8a; --sp-warn: #e8a83c; --sp-err: #e05c5c; --sp-info: #5c9ee8; --sp-buy: #2ecc8a; --sp-sell: #e05c5c; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; background: var(--sp-surf); color: var(--sp-txt); font-family: var(--fu); min-height: 100vh; } #currencies_page .page-header { background: transparent !important; padding: 1.25rem 0 .5rem; } #currencies_page .page-header h2 { font-family: var(--fd); font-size: 1.6rem; color: var(--sp) !important; letter-spacing: .02em; margin: 0; } #currencies_page .page-header h2 i { color: var(--sp) !important; } #currencies_page > main > .card { background: var(--sp-card) !important; border: 1px solid var(--sp-bdr) !important; border-radius: 16px !important; box-shadow: 0 4px 28px rgba(0,0,0,.45) !important; } #currencies_page #shamwariPayTabs { background: #181c27 !important; border-bottom: 1px solid var(--sp-bdr) !important; gap: .15rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0 !important; } #currencies_page #shamwariPayTabs::-webkit-scrollbar { display: none; } #currencies_page #shamwariPayTabs .nav-link { background: transparent !important; border: 1px solid transparent !important; border-bottom: none !important; border-radius: 10px 10px 0 0 !important; color: var(--sp-mut) !important; font-family: var(--fu); font-size: .74rem; font-weight: 600; letter-spacing: .04em; padding: .6rem 1rem !important; transition: all .15s; white-space: nowrap; } #currencies_page #shamwariPayTabs .nav-link:hover { color: var(--sp) !important; background: var(--sp-dim) !important; border-color: var(--sp-bdr) !important; } #currencies_page #shamwariPayTabs .nav-link.active { background: var(--sp-dim) !important; border-color: var(--sp-bdr) var(--sp-bdr) transparent !important; color: var(--sp) !important; border-bottom-color: var(--sp-card) !important; } #currencies_page #shamwariPayTabs .nav-link i { font-size: .8rem; } #currencies_page #shamwariPayTabs .nav-link.dropdown-toggle { display: flex; align-items: center; gap: .35rem; margin-bottom: 0 !important; padding: .6rem .9rem !important; } #currencies_page #shamwariPayTabs .dropdown-menu { background: var(--sp-surf) !important; border: 1px solid var(--sp-bdr) !important; border-radius: 10px !important; box-shadow: 0 8px 28px rgba(0,0,0,.55) !important; padding: .4rem !important; } #currencies_page #shamwariPayTabs .dropdown-item { color: var(--sp-txt) !important; font-family: var(--fu); font-size: .79rem; border-radius: 7px; padding: .45rem .75rem; } #currencies_page #shamwariPayTabs .dropdown-item:hover { background: var(--sp-dim) !important; color: var(--sp) !important; } #currencies_page #shamwariPayTabs .dropdown-divider { border-color: var(--sp-bdr) !important; } #currencies_page #shamwariPayTabContent { padding: 1.25rem; } #currencies_page .card { background: var(--sp-card) !important; border: 1px solid var(--sp-bdr) !important; border-radius: 14px !important; box-shadow: 0 3px 16px rgba(0,0,0,.3) !important; } #currencies_page .card-header.p-0 .bg-gradient-dark { background: linear-gradient(135deg, #1e2535, #13161e) !important; border-bottom: 1px solid var(--sp-bdr) !important; border-radius: 12px !important; } #currencies_page .card-header.p-0 .bg-gradient-dark h6 { font-family: var(--fd); font-size: .95rem; color: var(--sp) !important; letter-spacing: .06em; } #currencies_page .card-header.pb-0 { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent) !important; border-bottom: 1px solid var(--sp-bdr) !important; padding: .85rem 1.25rem !important; border-radius: 14px 14px 0 0 !important; } #currencies_page .card-header.pb-0 h5, #currencies_page .card-header.pb-0 h6 { font-family: var(--fd); color: var(--sp) !important; letter-spacing: .04em; margin: 0; } #currencies_page .table { color: var(--sp-txt) !important; font-family: var(--fu); font-size: .81rem; } #currencies_page .table thead th { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--sp) !important; font-weight: 700; border-bottom: 1px solid var(--sp-bdr) !important; background: transparent; padding: .75rem 1rem; white-space: nowrap; } #currencies_page .table-hover tbody tr { transition: background .12s; } #currencies_page .table-hover tbody tr:hover { background: rgba(201,168,76,.04) !important; } #currencies_page .table tbody td { border-color: rgba(255,255,255,.05) !important; vertical-align: middle; padding: .7rem 1rem; color: var(--sp-txt); } #currencies_page .sp-mono { font-family: var(--fm); font-size: .8rem; } #currencies_page .sp-code-cell { font-family: var(--fm); font-size: .8rem; color: var(--sp-info) !important; } #currencies_page .table td:first-child a { color: var(--sp) !important; font-family: var(--fm); font-size: .78rem; } #currencies_page .data-loading-container { padding: 2.5rem 1rem; text-align: center; } #currencies_page .data-loading-container .spinner-border { color: var(--sp) !important; width: 1.6rem; height: 1.6rem; border-width: 2px; } #currencies_page .data-loading-container p { font-family: var(--fu); font-size: .78rem; color: var(--sp-mut) !important; margin-top: .6rem; } #currencies_page .data-empty-container { padding: 2.5rem 1rem; text-align: center; } #currencies_page .data-empty-container i { color: rgba(201,168,76,.15) !important; } #currencies_page .data-empty-container p { color: var(--sp-mut) !important; font-family: var(--fu); font-size: .82rem; margin-top: .5rem; } #currencies_page #currencies_search .form-control { background: rgba(255,255,255,.04) !important; border: 1px solid var(--sp-bdr) !important; border-radius: 8px !important; color: var(--sp-txt) !important; font-family: var(--fm); font-size: .81rem; } #currencies_page #currencies_search .form-control:focus { border-color: var(--sp) !important; box-shadow: 0 0 0 3px var(--sp-dim) !important; } #currencies_page #currencies_search .form-control::placeholder { color: var(--sp-mut) !important; } #currencies_page .btn-dark, #currencies_page .btn-outline-dark { display: none; } #currencies_page .sp-search-btn { background: rgba(201,168,76,.12) !important; border: 1px solid var(--sp-bdr) !important; color: var(--sp) !important; border-radius: 8px; font-family: var(--fu); font-size: .74rem; font-weight: 700; letter-spacing: .04em; padding: .35rem .85rem; transition: all .15s; } #currencies_page .sp-search-btn:hover { background: var(--sp-dim) !important; border-color: var(--sp) !important; } #currencies_page .sp-action-toggle { color: var(--sp-mut) !important; padding: .2rem .5rem; } #currencies_page .sp-action-toggle:hover { color: var(--sp) !important; } #currencies_page .sp-dropdown { background: var(--sp-surf) !important; border: 1px solid var(--sp-bdr) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; padding: .4rem !important; } #currencies_page .sp-dropdown .dropdown-item { color: var(--sp-txt) !important; font-family: var(--fu); font-size: .8rem; border-radius: 7px; padding: .45rem .75rem; transition: background .12s; } #currencies_page .sp-dropdown .dropdown-item:hover { background: var(--sp-dim) !important; color: var(--sp) !important; } #currencies_page .sp-dropdown .dropdown-item.disabled { opacity: .35; pointer-events: none; } #currencies_page .sp-divider { border-color: var(--sp-bdr) !important; margin: .3rem 0 !important; } #currencies_page #currency_search .form-control { background: rgba(255,255,255,.04) !important; border: 1px solid var(--sp-bdr) !important; border-radius: 8px !important; color: var(--sp-txt) !important; font-family: var(--fm); font-size: .81rem; max-width: 140px; } #currencies_page #currency_search .form-control:focus { border-color: var(--sp) !important; box-shadow: 0 0 0 3px var(--sp-dim) !important; } #currencies_page #currency_search .form-control::placeholder { color: var(--sp-mut) !important; } #currencies_page .sp-vs-label { font-family: var(--fm); font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--sp-mut); padding: 0 .5rem; } #currencies_page .bg-gradient-dark { background: rgba(201,168,76,.12) !important; border: 1px solid var(--sp-bdr) !important; color: var(--sp) !important; font-family: var(--fu); font-size: .75rem; font-weight: 700; letter-spacing: .04em; border-radius: 8px; transition: all .15s; } #currencies_page .bg-gradient-dark:hover { background: var(--sp-dim) !important; } #currencies_page #tab-exchange .card .card-body.p-3.text-center { background: transparent !important; } #currencies_page #tab-exchange .card .text-xs.text-secondary { font-family: var(--fu); font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--sp-mut) !important; } #currencies_page #ms_your_nxt_balance { color: var(--sp) !important; font-family: var(--fm); } #currencies_page #your_currency_balance { color: var(--sp-info) !important; font-family: var(--fm); } #currencies_page #currency_name { color: var(--sp-txt) !important; font-family: var(--fd); font-size: 1rem; } #currencies_page #currency_code { font-family: var(--fm); font-size: .78rem; } #currencies_page .badge { font-family: var(--fm); font-size: .7rem; } #currencies_page .bg-gradient-secondary { background: rgba(201,168,76,.1) !important; border: 1px solid var(--sp-bdr) !important; color: var(--sp) !important; border-radius: 6px; } #currencies_page #currency_account, #currencies_page #currency_current_supply, #currencies_page #currency_max_supply, #currencies_page #currency_decimals { font-family: var(--fm); font-size: .8rem; color: var(--sp-txt) !important; } #currencies_page #ms_links_callout { font-family: var(--fu); font-size: .8rem; } #currencies_page #ms_links_callout a { color: var(--sp-info) !important; margin: 0 .25rem; } #currencies_page #ms_links_callout a:hover { color: var(--sp) !important; } #currencies_page hr.horizontal.dark { border-color: var(--sp-bdr) !important; opacity: 1 !important; } #currencies_page #buy_currency_box { border-color: rgba(46,204,138,.25) !important; } #currencies_page #sell_currency_box { border-color: rgba(224,92,92,.25) !important; } #currencies_page #buy_currency_box .card-header h6 { color: var(--sp-buy) !important; font-family: var(--fd); } #currencies_page #sell_currency_box .card-header h6 { color: var(--sp-sell) !important; font-family: var(--fd); } #currencies_page #buy_currency_box .card-header, #currencies_page #sell_currency_box .card-header { background: transparent !important; border-bottom: 1px solid var(--sp-bdr) !important; padding: .75rem 1rem !important; } #currencies_page #buy_currency_box .badge { background: rgba(46,204,138,.12) !important; color: var(--sp-buy) !important; border: 1px solid rgba(46,204,138,.25) !important; } #currencies_page #sell_currency_box .badge { background: rgba(224,92,92,.1) !important; color: var(--sp-sell) !important; border: 1px solid rgba(224,92,92,.2) !important; } #currencies_page #tab-exchange .form-label { font-family: var(--fu); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-mut); margin-bottom: .3rem; display: block; } #currencies_page #buy_currency_units, #currencies_page #sell_currency_units { background: rgba(255,255,255,.04) !important; border: 1px solid var(--sp-bdr) !important; border-radius: 8px !important; color: var(--sp-txt) !important; font-family: var(--fm); } #currencies_page #buy_currency_units:focus, #currencies_page #sell_currency_units:focus { border-color: var(--sp) !important; box-shadow: 0 0 0 3px var(--sp-dim) !important; } #currencies_page #buy_currency_rate, #currencies_page #buy_currency_total, #currencies_page #buy_currency_effective_rate, #currencies_page #sell_currency_rate, #currencies_page #sell_currency_total, #currencies_page #sell_currency_effective_rate { background: rgba(0,0,0,.2) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 8px !important; color: var(--sp-mut) !important; font-family: var(--fm); font-size: .8rem; cursor: default; } #currencies_page #buy_currency_button { background: linear-gradient(135deg, var(--sp-buy), #1a8a5a) !important; border: none !important; color: #0d0f13 !important; font-family: var(--fu); font-size: .78rem; font-weight: 700; letter-spacing: .05em; border-radius: 9px; box-shadow: 0 4px 16px rgba(46,204,138,.3); transition: all .17s; } #currencies_page #buy_currency_button:hover { background: linear-gradient(135deg, #3adc9a, var(--sp-buy)) !important; box-shadow: 0 6px 22px rgba(46,204,138,.45); transform: translateY(-1px); } #currencies_page #sell_currency_button { background: linear-gradient(135deg, var(--sp-sell), #a83232) !important; border: none !important; color: #fff !important; font-family: var(--fu); font-size: .78rem; font-weight: 700; letter-spacing: .05em; border-radius: 9px; box-shadow: 0 4px 16px rgba(224,92,92,.3); transition: all .17s; } #currencies_page #sell_currency_button:hover { background: linear-gradient(135deg, #f07070, var(--sp-sell)) !important; box-shadow: 0 6px 22px rgba(224,92,92,.45); transform: translateY(-1px); } #currencies_page #buy_currency_box ~ .col-md-6 .bg-gradient-success, #currencies_page .bg-gradient-success { background: linear-gradient(135deg, rgba(46,204,138,.2), rgba(46,204,138,.06)) !important; border: 1px solid rgba(46,204,138,.2) !important; } #currencies_page .bg-gradient-danger { background: linear-gradient(135deg, rgba(224,92,92,.2), rgba(224,92,92,.06)) !important; border: 1px solid rgba(224,92,92,.15) !important; } #currencies_page #MSnoCode .text-secondary { color: var(--sp-mut) !important; font-family: var(--fu); } #currencies_page #MSnoCode i { color: rgba(201,168,76,.1) !important; } #currencies_page .sp-progress { height: 5px; background: rgba(255,255,255,.07); border-radius: 50px; overflow: hidden; margin-bottom: .25rem; } #currencies_page .sp-progress-bar { height: 100%; border-radius: 50px; transition: width .4s ease; } #currencies_page .sp-bar-ok { background: var(--sp-buy); } #currencies_page .sp-bar-mid { background: var(--sp-warn); } #currencies_page .sp-bar-low { background: var(--sp-info); } #currencies_page .sp-pct-label { font-family: var(--fm); font-size: .68rem; color: var(--sp-mut); } #currencies_page .sp-status { font-family: var(--fu); font-size: .75rem; font-weight: 700; letter-spacing: .04em; } #currencies_page .sp-status-ok { color: var(--sp-buy); } #currencies_page .sp-status-warn { color: var(--sp-warn); } #currencies_page .sp-loan-filter { display: flex; gap: .4rem; margin-bottom: 1rem; justify-content: flex-end; } #currencies_page .sp-loan-filter-btn { background: rgba(255,255,255,.04) !important; border: 1px solid var(--sp-bdr) !important; color: var(--sp-mut) !important; border-radius: 8px; font-family: var(--fu); font-size: .73rem; font-weight: 700; letter-spacing: .04em; padding: .38rem .85rem; transition: all .15s; } #currencies_page .sp-loan-filter-btn:hover, #currencies_page .sp-loan-filter-btn.active, #currencies_page .sp-loan-filter-btn.sp-btn-active { background: var(--sp-dim) !important; border-color: var(--sp) !important; color: var(--sp) !important; } #currencies_page .sp-hist-toggle { display: flex; gap: .3rem; } #currencies_page .sp-hist-toggle button { background: rgba(255,255,255,.04) !important; border: 1px solid var(--sp-bdr) !important; color: var(--sp-mut) !important; border-radius: 7px; font-family: var(--fu); font-size: .71rem; font-weight: 700; letter-spacing: .04em; padding: .3rem .75rem; transition: all .14s; line-height: 1; } #currencies_page .sp-hist-toggle button.active, #currencies_page .sp-hist-toggle button.sp-btn-active { background: var(--sp-dim) !important; border-color: var(--sp) !important; color: var(--sp) !important; } #currencies_page .sp-approval-filter select { background: rgba(255,255,255,.04) !important; border: 1px solid var(--sp-bdr) !important; border-radius: 8px !important; color: var(--sp-txt) !important; font-family: var(--fu); font-size: .8rem; } #currencies_page .sp-approval-filter select option { background: var(--sp-surf); color: var(--sp-txt); } #currencies_page #ar_currency_no_entries i { color: rgba(46,204,138,.2) !important; } #currencies_page #ar_currency_no_entries p { color: var(--sp-mut) !important; font-family: var(--fu); font-size: .82rem; } #currencies_page .sp-btn-ok { display: inline-flex; align-items: center; background: rgba(46,204,138,.1) !important; border: 1px solid rgba(46,204,138,.3) !important; color: var(--sp-buy) !important; border-radius: 7px; font-family: var(--fu); font-size: .72rem; font-weight: 700; padding: .28rem .7rem; transition: all .13s; text-decoration: none; } #currencies_page .sp-btn-ok:hover { background: rgba(46,204,138,.18) !important; } #currencies_page .sp-btn-info { display: inline-flex; align-items: center; background: rgba(92,158,232,.1) !important; border: 1px solid rgba(92,158,232,.3) !important; color: var(--sp-info) !important; border-radius: 7px; font-family: var(--fu); font-size: .72rem; font-weight: 700; padding: .28rem .7rem; transition: all .13s; text-decoration: none; } #currencies_page .sp-btn-info:hover { background: rgba(92,158,232,.2) !important; } #currencies_page .sp-btn-warn { display: inline-flex; align-items: center; background: rgba(232,168,60,.1) !important; border: 1px solid rgba(232,168,60,.3) !important; color: var(--sp-warn) !important; border-radius: 7px; font-family: var(--fu); font-size: .72rem; font-weight: 700; padding: .28rem .7rem; transition: all .13s; text-decoration: none; } #currencies_page .sp-btn-warn:hover { background: rgba(232,168,60,.2) !important; } #currencies_page .sp-badge { display: inline-block; background: var(--sp-dim) !important; border: 1px solid var(--sp-bdr) !important; color: var(--sp) !important; border-radius: 6px; font-family: var(--fm); font-size: .72rem; font-weight: 700; letter-spacing: .05em; padding: .18em .55em; } #currencies_page .data-pagination li a, #currencies_page .pagination .page-link { background: rgba(255,255,255,.04) !important; border-color: var(--sp-bdr) !important; color: var(--sp-txt) !important; font-family: var(--fu); font-size: .78rem; border-radius: 7px; margin: 0 .1rem; } #currencies_page .pagination .page-item.active .page-link { background: var(--sp-dim) !important; border-color: var(--sp-bdr) !important; color: var(--sp) !important; } /* ===== Subscriptions Page ===== */ #subscriptions_page { --sub: #c9a84c; --sub-lt: #e8c96a; --sub-dim: rgba(201,168,76,.14); --sub-bdr: rgba(201,168,76,.2); --sub-card: #181c27; --sub-surf: #13161e; --sub-dark: #0d0f13; --sub-txt: #e8e3d5; --sub-mut: rgba(232,227,213,.46); --sub-ok: #2ecc8a; --sub-warn: #e8a83c; --sub-err: #e05c5c; --sub-info: #5c9ee8; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; background: var(--sub-surf); color: var(--sub-txt); font-family: var(--fu); min-height: 100vh; } #subscriptions_page .page-header { background: transparent !important; padding: 1.25rem 0 .5rem; } #subscriptions_page .page-header h2 { font-family: var(--fd); font-size: 1.6rem; color: var(--sub) !important; letter-spacing: .02em; margin: 0; } #subscriptions_page .page-header h2 i { color: var(--sub) !important; } #subscriptions_page > main > .sub-outer-card { background: var(--sub-card) !important; border: 1px solid var(--sub-bdr) !important; border-radius: 16px !important; box-shadow: 0 4px 28px rgba(0,0,0,.45) !important; overflow: hidden; } #subscriptions_page .sub-tabs { background: transparent !important; border-bottom: 1px solid var(--sub-bdr) !important; gap: .15rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 1rem; } #subscriptions_page .sub-tabs::-webkit-scrollbar { display: none; } #subscriptions_page .sub-tabs .nav-link { background: transparent !important; border: 1px solid transparent !important; border-bottom: none !important; border-radius: 10px 10px 0 0 !important; color: var(--sub-mut) !important; font-family: var(--fu); font-size: .74rem; font-weight: 600; letter-spacing: .04em; padding: .6rem 1rem !important; white-space: nowrap; transition: all .15s; } #subscriptions_page .sub-tabs .nav-link:hover { color: var(--sub) !important; background: var(--sub-dim) !important; } #subscriptions_page .sub-tabs .nav-link.active { background: var(--sub-dim) !important; border-color: var(--sub-bdr) var(--sub-bdr) transparent !important; color: var(--sub) !important; } #subscriptions_page .sub-tabs .nav-link i { font-size: .78rem; } #subscriptions_page .sub-tab-body { padding: 1.25rem; } #subscriptions_page .sub-card { background: var(--sub-card) !important; border: 1px solid var(--sub-bdr) !important; border-radius: 14px !important; box-shadow: 0 3px 16px rgba(0,0,0,.3) !important; overflow: hidden; margin-bottom: 1.25rem; } #subscriptions_page .sub-card-header { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent) !important; border-bottom: 1px solid var(--sub-bdr) !important; padding: .85rem 1.25rem !important; display: flex; align-items: center; justify-content: space-between; } #subscriptions_page .sub-card-header h6 { font-family: var(--fd); font-size: 1rem; color: var(--sub) !important; letter-spacing: .04em; margin: 0; } #subscriptions_page .card-header.p-0 .bg-gradient-dark { background: linear-gradient(135deg, #1e2535, #13161e) !important; border-bottom: 1px solid var(--sub-bdr) !important; border-radius: 12px !important; } #subscriptions_page .card-header.p-0 .bg-gradient-dark h6 { font-family: var(--fd); font-size: .95rem; color: var(--sub) !important; letter-spacing: .06em; } #subscriptions_page .table { color: var(--sub-txt) !important; font-family: var(--fu); font-size: .81rem; margin: 0; } #subscriptions_page .table thead th { font-size: .63rem; text-transform: uppercase; letter-spacing: .09em; color: var(--sub) !important; font-weight: 700; border-bottom: 1px solid var(--sub-bdr) !important; background: transparent; padding: .75rem 1rem; white-space: nowrap; } #subscriptions_page .table tbody tr { transition: background .12s; } #subscriptions_page .table tbody tr:hover { background: rgba(201,168,76,.04) !important; } #subscriptions_page .table tbody td { border-color: rgba(255,255,255,.05) !important; vertical-align: middle; padding: .65rem 1rem; } #subscriptions_page .table td.sub-mono { font-family: var(--fm); font-size: .79rem; } #subscriptions_page .data-loading-container { display: none; padding: 2.5rem 1rem; text-align: center; } #subscriptions_page .data-container.data-loading .data-loading-container { display: block; } #subscriptions_page .data-container.data-loading table { display: none; } #subscriptions_page .data-loading-container .spinner-border { color: var(--sub) !important; width: 1.5rem; height: 1.5rem; border-width: 2px; } #subscriptions_page .data-loading-container p, #subscriptions_page .data-empty p { font-family: var(--fu); font-size: .78rem; color: var(--sub-mut) !important; margin-top: .55rem; margin-bottom: 0; } #subscriptions_page .data-empty { display: none; padding: 2.5rem 1rem; text-align: center; } #subscriptions_page .data-container.data-empty .data-empty { display: block; } #subscriptions_page .data-empty i { color: rgba(201,168,76,.12) !important; } #subscriptions_page .sub-badge { display: inline-block; border-radius: 6px; font-family: var(--fm); font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .18em .55em; } #subscriptions_page .sub-badge-active { background: rgba(46,204,138,.12) !important; border: 1px solid rgba(46,204,138,.25) !important; color: var(--sub-ok) !important; } #subscriptions_page .sub-badge-expired { background: rgba(224,92,92,.09) !important; border: 1px solid rgba(224,92,92,.2) !important; color: var(--sub-err) !important; } #subscriptions_page .sub-badge-deleted { background: rgba(232,227,213,.06) !important; border: 1px solid rgba(232,227,213,.15) !important; color: var(--sub-mut) !important; } #subscriptions_page .sub-badge-gold { background: var(--sub-dim) !important; border: 1px solid var(--sub-bdr) !important; color: var(--sub) !important; } #subscriptions_page .sub-service-detail { background: rgba(255,255,255,.025) !important; border: 1px solid var(--sub-bdr) !important; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; } #subscriptions_page .sub-service-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: .75rem; } #subscriptions_page .sub-meta-item { display: flex; flex-direction: column; } #subscriptions_page .sub-meta-label { font-family: var(--fu); font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--sub-mut); margin-bottom: .15rem; } #subscriptions_page .sub-meta-value { font-family: var(--fm); font-size: .82rem; color: var(--sub-txt); } #subscriptions_page .sub-meta-value.gold { color: var(--sub); } #subscriptions_page .sub-description { font-family: var(--fu); font-size: .8rem; color: var(--sub-mut); margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.06); line-height: 1.5; } #subscriptions_page .sub-plans-row { display: flex; gap: .75rem; flex-wrap: wrap; margin: .75rem 0 1rem; } #subscriptions_page .sub-plan-card { background: rgba(201,168,76,.06) !important; border: 1px solid var(--sub-bdr) !important; border-radius: 10px; padding: .75rem 1rem; min-width: 130px; cursor: pointer; transition: all .16s; display: flex; flex-direction: column; gap: .2rem; } #subscriptions_page .sub-plan-card:hover, .sub-plan-card.selected { background: var(--sub-dim) !important; border-color: var(--sub) !important; box-shadow: 0 3px 14px rgba(201,168,76,.2); } #subscriptions_page .sub-plan-duration { font-family: var(--fu); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sub-mut); } #subscriptions_page .sub-plan-amount { font-family: var(--fm); font-size: 1.1rem; font-weight: 700; color: var(--sub); } #subscriptions_page .sub-plan-unit { font-family: var(--fu); font-size: .68rem; color: var(--sub-mut); } #subscriptions_page .sub-filter-bar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } #subscriptions_page .sub-filter-bar .form-control, #subscriptions_page .sub-filter-bar select { background: rgba(255,255,255,.04) !important; border: 1px solid var(--sub-bdr) !important; border-radius: 8px !important; color: var(--sub-txt) !important; font-family: var(--fm); font-size: .8rem; padding: .35rem .7rem; transition: border-color .18s; } #subscriptions_page .sub-filter-bar .form-control:focus, #subscriptions_page .sub-filter-bar select:focus { border-color: var(--sub) !important; box-shadow: 0 0 0 3px var(--sub-dim) !important; outline: none; } #subscriptions_page .sub-filter-bar .form-control::placeholder { color: var(--sub-mut) !important; } #subscriptions_page .sub-filter-bar select option { background: var(--sub-surf); color: var(--sub-txt); } #subscriptions_page .sub-btn { display: inline-flex; align-items: center; gap: .35rem; border-radius: 8px; font-family: var(--fu); font-size: .74rem; font-weight: 700; letter-spacing: .04em; padding: .38rem .9rem; cursor: pointer; transition: all .16s; text-decoration: none; white-space: nowrap; } #subscriptions_page .sub-btn-gold { background: linear-gradient(135deg, var(--sub), #a8842a) !important; border: none !important; color: #0d0f13 !important; box-shadow: 0 3px 12px rgba(201,168,76,.3); } #subscriptions_page .sub-btn-gold:hover { background: linear-gradient(135deg, var(--sub-lt), var(--sub)) !important; box-shadow: 0 5px 18px rgba(201,168,76,.45); transform: translateY(-1px); } #subscriptions_page .sub-btn-outline { background: rgba(201,168,76,.08) !important; border: 1px solid var(--sub-bdr) !important; color: var(--sub) !important; } #subscriptions_page .sub-btn-outline:hover { background: var(--sub-dim) !important; border-color: var(--sub) !important; } #subscriptions_page .sub-btn-danger { background: rgba(224,92,92,.09) !important; border: 1px solid rgba(224,92,92,.28) !important; color: var(--sub-err) !important; } #subscriptions_page .sub-btn-danger:hover { background: rgba(224,92,92,.16) !important; } #subscriptions_page .sub-progress { height: 5px; background: rgba(255,255,255,.07); border-radius: 50px; overflow: hidden; margin-top: .3rem; } #subscriptions_page .sub-progress-bar { height: 100%; border-radius: 50px; transition: width .4s ease; } #subscriptions_page .sub-progress-ok { background: linear-gradient(90deg, var(--sub-ok), rgba(46,204,138,.5)); } #subscriptions_page .sub-progress-warn { background: linear-gradient(90deg, var(--sub-warn), rgba(232,168,60,.5)); } #subscriptions_page .sub-progress-err { background: linear-gradient(90deg, var(--sub-err), rgba(224,92,92,.5)); } #subscriptions_page .data-pagination li a, #subscriptions_page .pagination .page-link { background: rgba(255,255,255,.04) !important; border-color: var(--sub-bdr) !important; color: var(--sub-txt) !important; font-family: var(--fu); font-size: .78rem; border-radius: 7px; margin: 0 .1rem; } #subscriptions_page .pagination .page-item.active .page-link { background: var(--sub-dim) !important; border-color: var(--sub-bdr) !important; color: var(--sub) !important; } /* ===== Insurance Page ===== */ #insurances_page { --ig: #c9a84c; --ig-lt: #e8c96a; --ig-dim: rgba(201,168,76,.16); --ig-card: #181c27; --ig-border: rgba(201,168,76,.2); --ig-text: #e8e3d5; --ig-muted: rgba(232,227,213,.48); --ig-ok: #2ecc8a; --ig-warn: #e8a83c; --ig-err: #e05c5c; --ig-info: #5c9ee8; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; background: #13161e; color: var(--ig-text); font-family: var(--fu); } #insurances_page .ig-app { max-width: 1600px; margin: 0 auto; padding: 1.5rem 1rem; } #insurances_page .ig-header { margin-bottom: 1.8rem; border-bottom: 1px solid var(--ig-border); padding-bottom: 1rem; } #insurances_page .ig-header h1 { font-family: var(--fd); font-size: 1.8rem; color: var(--ig); letter-spacing: .02em; margin: 0; } #insurances_page .ig-header h1 i { margin-right: 0.6rem; } #insurances_page .ig-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--ig-border); margin-bottom: 1.5rem; background: transparent; overflow-x: auto; scrollbar-width: thin; } #insurances_page .ig-tabs .tab-link { background: transparent; border: none; border-radius: 8px 8px 0 0; padding: 0.6rem 1.2rem; font-family: var(--fu); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ig-muted); transition: all 0.15s; cursor: pointer; white-space: nowrap; } #insurances_page .ig-tabs .tab-link i { margin-right: 0.5rem; font-size: 0.85rem; } #insurances_page .ig-tabs .tab-link:hover { color: var(--ig); background: var(--ig-dim); } #insurances_page .ig-tabs .tab-link.active { color: var(--ig); background: var(--ig-dim); border-bottom: 2px solid var(--ig); } #insurances_page .ig-card { background: var(--ig-card); border: 1px solid var(--ig-border); border-radius: 16px; overflow: hidden; margin-bottom: 1.5rem; } #insurances_page .ig-card-hd { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent); border-bottom: 1px solid var(--ig-border); padding: 0.8rem 1.2rem; display: flex; align-items: center; justify-content: space-between; } #insurances_page .ig-card-hd-title { font-family: var(--fd); font-size: 0.95rem; color: var(--ig); margin: 0; } #insurances_page .ig-card-body { padding: 1.2rem; } #insurances_page .ig-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; margin-bottom: 1.5rem; } #insurances_page .ig-stat { background: var(--ig-card); border: 1px solid var(--ig-border); border-radius: 12px; padding: 0.8rem 1rem; position: relative; overflow: hidden; } #insurances_page .ig-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--ig); } #insurances_page .ig-stat-lbl { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ig-muted); margin-bottom: 0.25rem; } #insurances_page .ig-stat-val { font-family: var(--fm); font-size: 0.95rem; color: var(--ig-text); font-weight: 600; word-break: break-all; } #insurances_page .ig-stat-val.gold { color: var(--ig); } #insurances_page .ig-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2em 0.7em; border-radius: 50px; font-family: var(--fm); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; border: 1px solid transparent; } #insurances_page .ig-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 0.3rem; } #insurances_page .ig-badge-active { background: rgba(46,204,138,.1); border-color: rgba(46,204,138,.32); color: #2ecc8a; } #insurances_page .ig-badge-delisted { background: rgba(224,92,92,.1); border-color: rgba(224,92,92,.32); color: #e05c5c; } #insurances_page .ig-badge-pending { background: rgba(232,168,60,.1); border-color: rgba(232,168,60,.32); color: #e8a83c; } #insurances_page .ig-badge-approved { background: rgba(46,204,138,.1); border-color: rgba(46,204,138,.32); color: #2ecc8a; } #insurances_page .ig-badge-rejected { background: rgba(224,92,92,.1); border-color: rgba(224,92,92,.32); color: #e05c5c; } #insurances_page .ig-badge-paid { background: rgba(92,158,232,.1); border-color: rgba(92,158,232,.32); color: #5c9ee8; } #insurances_page .ig-badge-settled { background: rgba(180,150,255,.1); border-color: rgba(180,150,255,.32); color: #b496ff; } #insurances_page .ig-badge-closed { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: var(--ig-muted); } #insurances_page .ig-tbl-wrap { overflow-x: auto; } #insurances_page .ig-tbl { width: 100%; border-collapse: collapse; font-family: var(--fm); font-size: 0.8rem; } #insurances_page .ig-tbl thead tr { border-bottom: 1px solid var(--ig-border); } #insurances_page .ig-tbl thead th { font-family: var(--fu); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ig); font-weight: 700; padding: 0.7rem 1rem; text-align: left; white-space: nowrap; } #insurances_page .ig-tbl thead th.num { text-align: right; } #insurances_page .ig-tbl tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); transition: background 0.12s; } #insurances_page .ig-tbl tbody tr:hover { background: rgba(201,168,76,.04); } #insurances_page .ig-tbl tbody td { padding: 0.65rem 1rem; color: var(--ig-text); vertical-align: middle; } #insurances_page .ig-tbl tbody td.mono { font-family: var(--fm); } #insurances_page .ig-tbl tbody td.num { font-family: var(--fm); text-align: right; } #insurances_page .ig-tbl-empty { text-align: center; padding: 2rem; color: var(--ig-muted); } #insurances_page .ig-tbl-empty i { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; } #insurances_page .ig-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1rem; border-radius: 7px; font-family: var(--fu); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: all 0.14s; text-decoration: none; } #insurances_page .ig-btn-gold { background: var(--ig); color: #0d0f13; border-color: var(--ig); } #insurances_page .ig-btn-gold:hover { background: var(--ig-lt); } #insurances_page .ig-btn-ol { background: transparent; color: var(--ig); border-color: var(--ig-border); } #insurances_page .ig-btn-ol:hover { background: var(--ig-dim); border-color: var(--ig); } #insurances_page .ig-btn-warn { background: rgba(232,168,60,.1); color: var(--ig-warn); border-color: rgba(232,168,60,.3); } #insurances_page .ig-btn-warn:hover { background: rgba(232,168,60,.2); } #insurances_page .ig-btn-ok { background: rgba(46,204,138,.1); color: var(--ig-ok); border-color: rgba(46,204,138,.3); } #insurances_page .ig-btn-sm { padding: 0.25rem 0.65rem; font-size: 0.68rem; } #insurances_page .ig-search { position: relative; min-width: 220px; } #insurances_page .ig-search input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--ig-border); border-radius: 8px; color: var(--ig-text); font-family: var(--fm); font-size: 0.8rem; padding: 0.45rem 2rem 0.45rem 0.9rem; } #insurances_page .ig-search button { position: absolute; right: 0; top: 0; bottom: 0; background: transparent; border: none; color: var(--ig); padding: 0 0.8rem; cursor: pointer; } #insurances_page .ig-toggle-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; } #insurances_page .ig-toggle { position: relative; width: 38px; height: 20px; flex-shrink: 0; } #insurances_page .ig-toggle input { opacity: 0; width: 0; height: 0; } #insurances_page .ig-toggle-track { position: absolute; inset: 0; background: rgba(255,255,255,.08); border: 1px solid var(--ig-border); border-radius: 50px; cursor: pointer; } #insurances_page .ig-toggle input:checked ~ .ig-toggle-track { background: var(--ig-dim); border-color: var(--ig); } #insurances_page .ig-toggle-track::after { content: ''; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; } #insurances_page .ig-toggle input:checked ~ .ig-toggle-track::after { transform: translateX(18px); background: var(--ig); } #insurances_page .ig-filter-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } #insurances_page .ig-filter-input { background: rgba(255,255,255,.04); border: 1px solid var(--ig-border); border-radius: 7px; color: var(--ig-text); font-family: var(--fm); font-size: 0.8rem; padding: 0.35rem 0.7rem; } #insurances_page .ig-notice { background: rgba(201,168,76,.07); border: 1px solid var(--ig-border); border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.78rem; display: flex; align-items: center; gap: 0.6rem; } #insurances_page .tab-pane { display: none; } #insurances_page .tab-pane.active { display: block; } #insurances_page .ig-page-title { font-family: var(--fd); font-size: 1.2rem; color: var(--ig); margin-bottom: 1rem; } #insurances_page hr { border-color: var(--ig-border); } #insurances_page code { color: var(--ig); background: var(--ig-dim); padding: 0.1rem 0.3rem; border-radius: 4px; } /* ===== Dashboard Page ===== */ #dashboard_page { --dsh: #c9a84c; --dsh-lt: #e8c96a; --dsh-dim: rgba(201,168,76,.14); --dsh-card: #181c27; --dsh-surf: #13161e; --dsh-bdr: rgba(201,168,76,.2); --dsh-txt: #e8e3d5; --dsh-mut: rgba(232,227,213,.46); --dsh-ok: #2ecc8a; --dsh-warn: #e8a83c; --dsh-err: #e05c5c; --dsh-info: #5c9ee8; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; background: var(--dsh-surf); color: var(--dsh-txt); font-family: var(--fu); min-height: 100vh; } #dashboard_page .page-header { padding: 1.25rem 0 .5rem; background: transparent; } #dashboard_page .breadcrumb { background: transparent !important; padding: 0; margin: 0; } #dashboard_page .breadcrumb-item, #dashboard_page .breadcrumb-item.active { font-family: var(--fu); font-size: .75rem; color: var(--dsh-mut) !important; } #dashboard_page .breadcrumb-item + .breadcrumb-item::before { color: var(--dsh-mut); } #dashboard_page h2 { font-family: var(--fd); font-size: 1.6rem; color: var(--dsh); letter-spacing: .02em; margin: .25rem 0 .5rem; } #dashboard_page .alert-danger { background: rgba(224,92,92,.1) !important; border: 1px solid rgba(224,92,92,.3) !important; color: var(--dsh-err) !important; border-radius: 10px; font-family: var(--fu); font-size: .82rem; } #dashboard_page .card { background: var(--dsh-card) !important; border: 1px solid var(--dsh-bdr) !important; border-radius: 14px !important; box-shadow: 0 4px 20px rgba(0,0,0,.38) !important; overflow: visible; } #dashboard_page .dashboard_first_row .card-header, #dashboard_page .row.mb-4 .card-header { background: transparent !important; border-bottom: none !important; padding: .75rem 1rem 0 !important; } #dashboard_page .icon.icon-lg.icon-shape { width: 56px !important; height: 56px !important; border-radius: 12px !important; display: flex !important; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 6px 20px rgba(0,0,0,.4) !important; } #dashboard_page .bg-gradient-success { background: linear-gradient(135deg, #2ecc8a, #1a8a5a) !important; } #dashboard_page .bg-gradient-warning { background: linear-gradient(135deg, #e8a83c, #b87c1a) !important; } #dashboard_page .bg-gradient-primary { background: linear-gradient(135deg, #c9a84c, #8a6c28) !important; } #dashboard_page .bg-gradient-dark { background: linear-gradient(135deg, #3a3f52, #1a1e2a) !important; } #dashboard_page .bg-gradient-info { background: linear-gradient(135deg, #5c9ee8, #2a6ab8) !important; } #dashboard_page .card-header .text-end p.text-sm { font-family: var(--fu); font-size: .68rem !important; text-transform: uppercase; letter-spacing: .09em; color: var(--dsh-mut) !important; margin: 0; } #dashboard_page .card-header h4 { font-family: var(--fm); font-size: 1.45rem !important; font-weight: 700; color: var(--dsh-txt) !important; margin: .15rem 0 .1rem !important; letter-spacing: .02em; } #dashboard_page .card-header .text-secondary { font-family: var(--fu); font-size: .74rem !important; color: var(--dsh-mut) !important; } #dashboard_page .loading_dots span { color: var(--dsh) !important; opacity: .6; animation: blink 1.2s infinite; } #dashboard_page .loading_dots span:nth-child(2) { animation-delay: .2s; } #dashboard_page .loading_dots span:nth-child(3) { animation-delay: .4s; } @keyframes blink { 0%,100%{opacity:.3} 50%{opacity:1} } #dashboard_page hr.horizontal.dark { border-color: var(--dsh-bdr) !important; opacity: 1 !important; margin: 0 !important; } #dashboard_page .card-footer { background: rgba(0,0,0,.15) !important; border-top: 1px solid var(--dsh-bdr) !important; border-radius: 0 0 14px 14px !important; padding: .7rem 1rem !important; } #dashboard_page .card-footer a { color: var(--dsh) !important; font-family: var(--fu); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: color .15s; display: inline-flex; align-items: center; gap: .4rem; } #dashboard_page .card-footer a:hover { color: var(--dsh-lt) !important; } #dashboard_page .card-footer a i { font-size: .9rem; } #dashboard_page .coin-symbol { font-family: var(--fm); font-size: .9rem; color: var(--dsh-mut); } #dashboard_page #nrs_current_block_time { font-family: var(--fm); font-size: 1.3rem; color: var(--dsh-txt); } #dashboard_page .nrs_current_block { font-family: var(--fm); font-size: .85rem; color: var(--dsh); } #dashboard_page .card .card-header.pb-0 { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent) !important; border-bottom: 1px solid var(--dsh-bdr) !important; padding: .85rem 1.25rem !important; border-radius: 14px 14px 0 0 !important; } #dashboard_page .card-header.pb-0 h6 { font-family: var(--fd); font-size: 1rem; color: var(--dsh); letter-spacing: .04em; margin: 0; } #dashboard_page .table { font-family: var(--fu); font-size: .81rem; color: var(--dsh-txt) !important; margin: 0; } #dashboard_page .table thead tr { border-bottom: 1px solid var(--dsh-bdr) !important; } #dashboard_page .table thead th { font-family: var(--fu); font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--dsh) !important; font-weight: 700; padding: .65rem 1rem; background: transparent; border: none; white-space: nowrap; } #dashboard_page .table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .13s; } #dashboard_page .table tbody tr:hover { background: rgba(201,168,76,.04) !important; } #dashboard_page .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; } #dashboard_page .table td { padding: .65rem 1rem; color: var(--dsh-txt); border: none; vertical-align: middle; } #dashboard_page #dashboard_loading { padding: 2.5rem 1rem; text-align: center; } #dashboard_page #dashboard_loading .spinner-border { color: var(--dsh) !important; width: 1.4rem; height: 1.4rem; border-width: 2px; } #dashboard_page #dashboard_loading p { font-family: var(--fu); font-size: .78rem; color: var(--dsh-mut); margin-top: .6rem; } #dashboard_page #dashboard_empty { padding: 2.5rem 1rem; text-align: center; } #dashboard_page #dashboard_empty i { color: rgba(201,168,76,.15) !important; } #dashboard_page #dashboard_empty p { font-family: var(--fu); font-size: .82rem; color: var(--dsh-mut) !important; margin: .5rem 0 0; } #dashboard_page #dashboard_transactions_footer { border-radius: 0 0 14px 14px !important; } #dashboard_page .row.mb-4 .card-header .text-end h4 { font-size: 1.2rem !important; } /* ===== Digital Certificates Page ===== */ #digital_certificates_page { --ct: #c9a84c; --ct-lt: #e8c96a; --ct-dim: rgba(201,168,76,.14); --ct-card: #181c27; --ct-surf: #13161e; --ct-bdr: rgba(201,168,76,.2); --ct-txt: #e8e3d5; --ct-mut: rgba(232,227,213,.46); --ct-ok: #2ecc8a; --ct-warn: #e8a83c; --ct-err: #e05c5c; --ct-info: #5c9ee8; --ct-r: 10px; --ct-rl: 16px; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; } #digital_certificates_page.ct-page { padding: 0 0 2.5rem; } #digital_certificates_page .ct-title { font-family: var(--fd); font-size: 1.35rem; letter-spacing: .02em; color: var(--ct); margin: 0 0 1.25rem; padding-bottom: .55rem; border-bottom: 1px solid var(--ct-bdr); display: flex; align-items: center; gap: .6rem; } #digital_certificates_page .ct-title i { font-size: 1rem; opacity: .85; } #digital_certificates_page .ct-card { background: var(--ct-card); border: 1px solid var(--ct-bdr); border-radius: var(--ct-rl); overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.38); margin-bottom: 1.5rem; } #digital_certificates_page .ct-card-hd { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent); border-bottom: 1px solid var(--ct-bdr); padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } #digital_certificates_page .ct-card-hd-title { font-family: var(--fd); font-size: 1rem; color: var(--ct); letter-spacing: .04em; margin: 0; } #digital_certificates_page .ct-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ct-bdr); background: var(--ct-card); padding: 0 1.25rem; flex-wrap: wrap; } #digital_certificates_page .ct-tab { display: flex; align-items: center; gap: .4rem; padding: .75rem 1.1rem; font-family: var(--fu); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ct-mut); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .16s, border-color .16s; } #digital_certificates_page .ct-tab:hover { color: var(--ct-txt); } #digital_certificates_page .ct-tab.active { color: var(--ct); border-bottom-color: var(--ct); } #digital_certificates_page .ct-tab-count { font-family: var(--fm); font-size: .65rem; background: var(--ct-dim); color: var(--ct); border-radius: 50px; padding: .1em .45em; display: none; } #digital_certificates_page .ct-tab.active .ct-tab-count { display: inline; } #digital_certificates_page .ct-filters { display: flex; gap: .65rem; align-items: flex-end; flex-wrap: wrap; padding: .85rem 1.25rem; border-bottom: 1px solid var(--ct-bdr); background: rgba(255,255,255,.015); } #digital_certificates_page .ct-filter-group { display: flex; flex-direction: column; gap: .28rem; flex: 1; min-width: 130px; max-width: 200px; } #digital_certificates_page .ct-filter-label { font-family: var(--fu); font-size: .63rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ct-mut); } #digital_certificates_page .ct-filter-input { background: rgba(255,255,255,.04); border: 1px solid var(--ct-bdr); border-radius: 7px; color: var(--ct-txt); font-family: var(--fm); font-size: .78rem; padding: .42rem .75rem; transition: border-color .18s, box-shadow .18s; } #digital_certificates_page .ct-filter-input:focus { outline: none; border-color: var(--ct); box-shadow: 0 0 0 3px var(--ct-dim); background: rgba(255,255,255,.06); } #digital_certificates_page .ct-filter-input::placeholder { color: var(--ct-mut); } #digital_certificates_page .ct-btn { display: inline-flex; align-items: center; gap: .38rem; padding: .42rem 1rem; border-radius: 7px; font-family: var(--fu); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: all .16s; white-space: nowrap; line-height: 1.4; text-decoration: none; } #digital_certificates_page .ct-btn-gold { background: var(--ct); color: #0d0f13; border-color: var(--ct); } #digital_certificates_page .ct-btn-gold:hover { background: var(--ct-lt); border-color: var(--ct-lt); color: #0d0f13; } #digital_certificates_page .ct-btn-ol { background: transparent; color: var(--ct); border-color: var(--ct-bdr); } #digital_certificates_page .ct-btn-ol:hover { background: var(--ct-dim); border-color: var(--ct); } #digital_certificates_page .ct-btn-ok { background: rgba(46,204,138,.1); color: var(--ct-ok); border-color: rgba(46,204,138,.3); } #digital_certificates_page .ct-btn-ok:hover { background: rgba(46,204,138,.2); } #digital_certificates_page .ct-btn-info { background: rgba(92,158,232,.1); color: var(--ct-info); border-color: rgba(92,158,232,.3); } #digital_certificates_page .ct-btn-info:hover { background: rgba(92,158,232,.2); } #digital_certificates_page .ct-btn-err { background: rgba(224,92,92,.1); color: var(--ct-err); border-color: rgba(224,92,92,.3); } #digital_certificates_page .ct-btn-err:hover { background: rgba(224,92,92,.2); } #digital_certificates_page .ct-btn-sm { padding: .28rem .7rem; font-size: .68rem; } #digital_certificates_page .ct-btn:disabled { opacity: .42; cursor: not-allowed; } #digital_certificates_page .ct-badge { display: inline-flex; align-items: center; gap: .28rem; padding: .22em .7em; border-radius: 50px; font-family: var(--fu); font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border: 1px solid transparent; } #digital_certificates_page .ct-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } #digital_certificates_page .ct-badge-valid { background: rgba(46,204,138,.1); border-color: rgba(46,204,138,.3); color: #2ecc8a; } #digital_certificates_page .ct-badge-expired { background: rgba(224,92,92,.1); border-color: rgba(224,92,92,.3); color: #e05c5c; } #digital_certificates_page .ct-badge-noexp { background: rgba(201,168,76,.1); border-color: rgba(201,168,76,.2); color: #c9a84c; } #digital_certificates_page .ct-badge-type { background: rgba(92,158,232,.1); border-color: rgba(92,158,232,.3); color: #5c9ee8; } #digital_certificates_page .ct-tbl-wrap { overflow-x: auto; } #digital_certificates_page .ct-tbl { width: 100%; border-collapse: collapse; font-family: var(--fu); font-size: .81rem; } #digital_certificates_page .ct-tbl thead tr { border-bottom: 1px solid var(--ct-bdr); } #digital_certificates_page .ct-tbl thead th { font-family: var(--fu); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ct); font-weight: 700; padding: .65rem 1rem; text-align: left; white-space: nowrap; } #digital_certificates_page .ct-tbl tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .13s; } #digital_certificates_page .ct-tbl tbody tr:hover { background: rgba(201,168,76,.04); } #digital_certificates_page .ct-tbl tbody td { padding: .7rem 1rem; color: var(--ct-txt); vertical-align: middle; } #digital_certificates_page .ct-tbl tbody td.mono { font-family: var(--fm); font-size: .78rem; } #digital_certificates_page .ct-link { color: var(--ct); text-decoration: none; font-family: var(--fm); font-size: .78rem; } #digital_certificates_page .ct-link:hover { color: var(--ct-lt); text-decoration: underline; } #digital_certificates_page .ct-empty { text-align: center; padding: 3.5rem 1rem; color: var(--ct-mut); } #digital_certificates_page .ct-empty i { font-size: 2.2rem; display: block; margin-bottom: .75rem; color: rgba(201,168,76,.15); } #digital_certificates_page .ct-empty p { font-family: var(--fu); font-size: .83rem; margin: 0; } #digital_certificates_page .ct-spinner { text-align: center; padding: 2.5rem 1rem; } #digital_certificates_page .ct-spinner .spinner-border { color: var(--ct); width: 1.4rem; height: 1.4rem; border-width: 2px; } #digital_certificates_page .ct-cert-card { background: linear-gradient(135deg, var(--ct-card) 0%, #1e2235 100%); border: 1px solid var(--ct-bdr); border-radius: var(--ct-rl); padding: 1.5rem; position: relative; overflow: hidden; } #digital_certificates_page .ct-cert-card::before { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%); border-radius: 50%; transform: translate(30px, -30px); } #digital_certificates_page .ct-cert-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 80px; background: radial-gradient(circle, rgba(201,168,76,.05) 0%, transparent 70%); border-radius: 50%; transform: translate(-20px, 20px); } #digital_certificates_page .ct-cert-watermark { position: absolute; bottom: 1rem; right: 1.25rem; font-family: var(--fd); font-size: 3.5rem; color: rgba(201,168,76,.04); letter-spacing: .1em; pointer-events: none; user-select: none; } #digital_certificates_page .ct-cert-seal { width: 52px; height: 52px; border-radius: 50%; background: var(--ct-dim); border: 2px solid var(--ct-bdr); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } #digital_certificates_page .ct-cert-seal i { font-size: 1.2rem; color: var(--ct); } #digital_certificates_page .ct-cert-name { font-family: var(--fd); font-size: 1.25rem; color: var(--ct); letter-spacing: .03em; margin-bottom: .35rem; } #digital_certificates_page .ct-cert-type { font-family: var(--fu); font-size: .74rem; color: var(--ct-mut); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; } #digital_certificates_page .ct-cert-row { display: flex; align-items: baseline; gap: .65rem; padding: .42rem 0; border-bottom: 1px solid rgba(255,255,255,.04); } #digital_certificates_page .ct-cert-row:last-child { border-bottom: none; } #digital_certificates_page .ct-cert-key { font-family: var(--fu); font-size: .65rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ct-mut); flex: 0 0 110px; min-width: 90px; } #digital_certificates_page .ct-cert-val { font-family: var(--fm); font-size: .8rem; color: var(--ct-txt); word-break: break-all; } #digital_certificates_page .ct-cert-val a { color: var(--ct); text-decoration: none; } #digital_certificates_page .ct-cert-val a:hover { text-decoration: underline; } #digital_certificates_page .ct-sig-block { background: rgba(0,0,0,.25); border: 1px solid var(--ct-bdr); border-radius: 8px; padding: .75rem; font-family: var(--fm); font-size: .68rem; color: rgba(232,227,213,.35); word-break: break-all; line-height: 1.55; max-height: 80px; overflow-y: auto; } #digital_certificates_page .ct-dropzone { border: 2px dashed var(--ct-bdr); border-radius: var(--ct-r); padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: rgba(255,255,255,.02); } #digital_certificates_page .ct-dropzone:hover, .ct-dropzone.drag-over { border-color: var(--ct); background: var(--ct-dim); } #digital_certificates_page .ct-dropzone i { font-size: 2rem; color: rgba(201,168,76,.35); display: block; margin-bottom: .65rem; } #digital_certificates_page .ct-dropzone-label { font-family: var(--fu); font-size: .8rem; color: var(--ct-mut); display: block; margin-bottom: .3rem; } #digital_certificates_page .ct-dropzone-sub { font-family: var(--fu); font-size: .7rem; color: rgba(232,227,213,.28); } #digital_certificates_page .ct-file-chosen { font-family: var(--fm); font-size: .76rem; color: var(--ct); margin-top: .5rem; display: none; } #digital_certificates_page .ct-verify-result { border-radius: 10px; padding: 1.25rem 1.5rem; display: none; align-items: center; gap: 1rem; } #digital_certificates_page .ct-verify-result.valid { background: rgba(46,204,138,.08); border: 1px solid rgba(46,204,138,.25); } #digital_certificates_page .ct-verify-result.invalid { background: rgba(224,92,92,.08); border: 1px solid rgba(224,92,92,.25); } #digital_certificates_page .ct-verify-result-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; } #digital_certificates_page .ct-verify-result.valid .ct-verify-result-icon { background: rgba(46,204,138,.15); color: #2ecc8a; } #digital_certificates_page .ct-verify-result.invalid .ct-verify-result-icon { background: rgba(224,92,92,.15); color: #e05c5c; } #digital_certificates_page .ct-verify-result-text { flex: 1; } #digital_certificates_page .ct-verify-result-heading { font-family: var(--fd); font-size: 1rem; margin-bottom: .2rem; } #digital_certificates_page .ct-verify-result.valid .ct-verify-result-heading { color: #2ecc8a; } #digital_certificates_page .ct-verify-result.invalid .ct-verify-result-heading { color: #e05c5c; } #digital_certificates_page .ct-verify-result-sub { font-family: var(--fu); font-size: .76rem; color: var(--ct-mut); margin: 0; } #digital_certificates_page .ct-modal-label { display: block; margin-bottom: .3rem; font-family: var(--fu); font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ct-mut); } #digital_certificates_page .ct-modal-input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--ct-bdr); border-radius: 7px; color: var(--ct-txt); font-family: var(--fm); font-size: .83rem; padding: .48rem .8rem; transition: border-color .2s, box-shadow .2s; } #digital_certificates_page .ct-modal-input:focus { outline: none; border-color: var(--ct); box-shadow: 0 0 0 3px var(--ct-dim); background: rgba(255,255,255,.06); } #digital_certificates_page .ct-modal-input::placeholder { color: var(--ct-mut); } #digital_certificates_page .ct-modal-input[readonly] { opacity: .7; cursor: not-allowed; } #digital_certificates_page .ct-modal-group { margin-bottom: .9rem; } #digital_certificates_page .ct-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media(max-width:480px) { #digital_certificates_page .ct-modal-row { grid-template-columns: 1fr; } } /* ===== Messages Page ===== */ #messages_page { --mg: #c9a84c; --mg-lt: #e8c96a; --mg-dim: rgba(201,168,76,.14); --mg-card: #181c27; --mg-surf: #13161e; --mg-bdr: rgba(201,168,76,.18); --mg-txt: #e8e3d5; --mg-mut: rgba(232,227,213,.46); --mg-ok: #2ecc8a; --mg-err: #e05c5c; --mg-info: #5c9ee8; --mg-r: 10px; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; --pane-folder: 220px; --pane-list: 320px; padding: 0; } #messages_page .mg-shell { display: flex; height: calc(100vh - 64px); overflow: hidden; background: var(--mg-surf); border-top: 1px solid var(--mg-bdr); } #messages_page .mg-folders { width: var(--pane-folder); flex-shrink: 0; background: var(--mg-card); border-right: 1px solid var(--mg-bdr); display: flex; flex-direction: column; overflow: hidden; } #messages_page .mg-folders-hd { padding: 1rem 1rem .6rem; border-bottom: 1px solid var(--mg-bdr); } #messages_page .mg-compose-btn { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .55rem 1rem; background: var(--mg); border: none; border-radius: 8px; color: #0d0f13; font-family: var(--fu); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .16s; } #messages_page .mg-compose-btn:hover { background: var(--mg-lt); } #messages_page .mg-folders-list { flex: 1; overflow-y: auto; padding: .5rem 0; } #messages_page .mg-folder-item { display: flex; align-items: center; gap: .65rem; padding: .5rem 1rem; font-family: var(--fu); font-size: .8rem; color: var(--mg-mut); cursor: pointer; border-radius: 0; transition: background .14s, color .14s; border: none; background: none; width: 100%; text-align: left; } #messages_page .mg-folder-item:hover { background: rgba(255,255,255,.04); color: var(--mg-txt); } #messages_page .mg-folder-item.active { background: var(--mg-dim); color: var(--mg); border-right: 3px solid var(--mg); } #messages_page .mg-folder-item i { width: 16px; text-align: center; font-size: .78rem; } #messages_page .mg-folder-item .mg-folder-count { margin-left: auto; font-family: var(--fm); font-size: .65rem; background: rgba(201,168,76,.18); color: var(--mg); border-radius: 50px; padding: .1em .5em; display: none; } #messages_page .mg-folder-item.active .mg-folder-count, #messages_page .mg-folder-item .mg-folder-count.show { display: inline; } #messages_page .mg-threads { width: var(--pane-list); flex-shrink: 0; background: var(--mg-surf); border-right: 1px solid var(--mg-bdr); display: flex; flex-direction: column; overflow: hidden; } #messages_page .mg-threads-hd { padding: .75rem 1rem; border-bottom: 1px solid var(--mg-bdr); display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } #messages_page .mg-threads-title { font-family: var(--fd); font-size: 1rem; color: var(--mg); letter-spacing: .03em; margin: 0; flex: 1; } #messages_page .mg-search-wrap { position: relative; flex: 1; max-width: 200px; } #messages_page .mg-search-input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--mg-bdr); border-radius: 6px; color: var(--mg-txt); font-family: var(--fu); font-size: .75rem; padding: .35rem 1.8rem .35rem .65rem; transition: border-color .18s; } #messages_page .mg-search-input:focus { outline: none; border-color: var(--mg); box-shadow: 0 0 0 2px var(--mg-dim); } #messages_page .mg-search-input::placeholder { color: var(--mg-mut); } #messages_page .mg-search-icon { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); color: var(--mg-mut); font-size: .7rem; pointer-events: none; } #messages_page .mg-threads-scroll { flex: 1; overflow-y: auto; } #messages_page .mg-threads-scroll::-webkit-scrollbar { width: 4px; } #messages_page .mg-threads-scroll::-webkit-scrollbar-track { background: transparent; } #messages_page .mg-threads-scroll::-webkit-scrollbar-thumb { background: rgba(201,168,76,.2); border-radius: 4px; } #messages_page .mg-thread-row { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .13s; position: relative; } #messages_page .mg-thread-row:hover { background: rgba(255,255,255,.03); } #messages_page .mg-thread-row.active { background: var(--mg-dim); } #messages_page .mg-thread-row.unread .mg-thread-sender { font-weight: 700; color: var(--mg-txt); } #messages_page .mg-thread-row.unread::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--mg); border-radius: 0 2px 2px 0; } #messages_page .mg-thread-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--mg-dim); border: 1px solid var(--mg-bdr); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--fd); font-size: .85rem; color: var(--mg); } #messages_page .mg-thread-body { flex: 1; min-width: 0; } #messages_page .mg-thread-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2rem; } #messages_page .mg-thread-sender { font-family: var(--fu); font-size: .8rem; color: var(--mg-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } #messages_page .mg-thread-time { font-family: var(--fm); font-size: .65rem; color: var(--mg-mut); white-space: nowrap; flex-shrink: 0; } #messages_page .mg-thread-preview { font-family: var(--fu); font-size: .75rem; color: var(--mg-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } #messages_page .mg-thread-badges { display: flex; gap: .3rem; margin-top: .2rem; } #messages_page .mg-mbadge { display: inline-flex; align-items: center; padding: .12em .5em; border-radius: 50px; font-family: var(--fu); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } #messages_page .mg-mbadge-enc { background: rgba(224,92,92,.12); color: var(--mg-err); border: 1px solid rgba(224,92,92,.28); } #messages_page .mg-mbadge-prune { background: rgba(92,158,232,.12); color: var(--mg-info); border: 1px solid rgba(92,158,232,.28); } #messages_page .mg-mbadge-sent { background: rgba(46,204,138,.12); color: var(--mg-ok); border: 1px solid rgba(46,204,138,.28); } #messages_page .mg-mbadge-cnt { background: var(--mg-dim); color: var(--mg); border: 1px solid var(--mg-bdr); } #messages_page .mg-threads-empty { text-align: center; padding: 3rem 1rem; color: var(--mg-mut); font-family: var(--fu); font-size: .8rem; } #messages_page .mg-threads-empty i { font-size: 2rem; display: block; margin-bottom: .6rem; color: rgba(201,168,76,.14); } #messages_page .mg-spinner { text-align: center; padding: 2.5rem 1rem; } #messages_page .mg-spinner .spinner-border { color: var(--mg); width: 1.4rem; height: 1.4rem; border-width: 2px; } #messages_page .mg-reading { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--mg-surf); } #messages_page .mg-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mg-mut); } #messages_page .mg-welcome i { font-size: 3rem; color: rgba(201,168,76,.16); margin-bottom: 1rem; } #messages_page .mg-welcome h4 { font-family: var(--fd); font-size: 1.3rem; color: var(--mg-mut); margin-bottom: .4rem; } #messages_page .mg-welcome p { font-family: var(--fu); font-size: .82rem; margin: 0; } #messages_page .mg-read-hd { padding: .85rem 1.25rem; border-bottom: 1px solid var(--mg-bdr); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--mg-card); } #messages_page .mg-read-contact { font-family: var(--fd); font-size: 1.05rem; color: var(--mg); letter-spacing: .02em; } #messages_page .mg-read-contact-rs { font-family: var(--fm); font-size: .7rem; color: var(--mg-mut); margin-top: .1rem; } #messages_page .mg-read-actions { display: flex; gap: .4rem; } #messages_page .mg-act-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .75rem; border-radius: 6px; font-family: var(--fu); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--mg-bdr); background: transparent; color: var(--mg-mut); transition: all .15s; } #messages_page .mg-act-btn:hover { background: var(--mg-dim); color: var(--mg); border-color: var(--mg); } #messages_page .mg-act-btn.primary { background: var(--mg); color: #0d0f13; border-color: var(--mg); } #messages_page .mg-act-btn.primary:hover { background: var(--mg-lt); border-color: var(--mg-lt); } #messages_page .mg-messages-area { flex: 1; overflow-y: auto; padding: 1.25rem; } #messages_page .mg-messages-area::-webkit-scrollbar { width: 4px; } #messages_page .mg-messages-area::-webkit-scrollbar-thumb { background: rgba(201,168,76,.18); border-radius: 4px; } #messages_page .mg-date-divider { text-align: center; margin: 1.25rem 0 .75rem; position: relative; } #messages_page .mg-date-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.05); } #messages_page .mg-date-divider span { position: relative; background: var(--mg-surf); padding: 0 .75rem; font-family: var(--fu); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mg-mut); } #messages_page .mg-msg { display: flex; margin-bottom: .9rem; } #messages_page .mg-msg.out { justify-content: flex-end; } #messages_page .mg-msg.in { justify-content: flex-start; } #messages_page .mg-bubble { max-width: 72%; border-radius: 12px; padding: .75rem .95rem; position: relative; } #messages_page .mg-msg.in .mg-bubble { background: var(--mg-card); border: 1px solid var(--mg-bdr); border-top-left-radius: 3px; } #messages_page .mg-msg.out .mg-bubble { background: var(--mg-dim); border: 1px solid rgba(201,168,76,.25); border-top-right-radius: 3px; } #messages_page .mg-msg-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; } #messages_page .mg-msg-addr { font-family: var(--fm); font-size: .67rem; color: var(--mg-mut); } #messages_page .mg-msg.out .mg-msg-addr { color: rgba(201,168,76,.65); } #messages_page .mg-msg-ts { font-family: var(--fm); font-size: .62rem; color: var(--mg-mut); margin-left: auto; } #messages_page .mg-msg.out .mg-msg-ts { color: rgba(201,168,76,.5); } #messages_page .mg-msg-body { font-family: var(--fu); font-size: .83rem; color: var(--mg-txt); line-height: 1.55; word-break: break-word; white-space: pre-wrap; } #messages_page .mg-msg.out .mg-msg-body { color: var(--mg-txt); } #messages_page .mg-msg-enc { display: flex; align-items: center; gap: .4rem; font-family: var(--fu); font-size: .76rem; color: var(--mg-mut); font-style: italic; } #messages_page .mg-msg-enc i { color: var(--mg-err); font-size: .8rem; } #messages_page .mg-msg-prune { display: flex; align-items: center; gap: .5rem; font-family: var(--fu); font-size: .76rem; color: var(--mg-mut); } #messages_page .mg-msg-footer { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; } #messages_page .mg-hash-tag { font-family: var(--fm); font-size: .62rem; color: var(--mg-mut); opacity: .55; cursor: pointer; transition: opacity .15s; } #messages_page .mg-hash-tag:hover { opacity: 1; color: var(--mg); } #messages_page .mg-msg-action { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .55rem; border-radius: 5px; font-family: var(--fu); font-size: .65rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--mg-bdr); background: rgba(255,255,255,.03); color: var(--mg-mut); cursor: pointer; transition: all .14s; text-decoration: none; } #messages_page .mg-msg-action:hover { background: var(--mg-dim); color: var(--mg); border-color: var(--mg); } #messages_page .mg-msg-action.warn { border-color: rgba(224,92,92,.25); } #messages_page .mg-msg-action.warn:hover { background: rgba(224,92,92,.1); color: var(--mg-err); border-color: var(--mg-err); } #messages_page .mg-compose { border-top: 1px solid var(--mg-bdr); background: var(--mg-card); padding: .85rem 1.2rem; flex-shrink: 0; } #messages_page .mg-compose-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; } #messages_page .mg-compose-to { font-family: var(--fu); font-size: .72rem; color: var(--mg-mut); display: flex; align-items: center; gap: .4rem; } #messages_page .mg-compose-to strong { font-family: var(--fm); color: var(--mg); font-size: .75rem; } #messages_page .mg-compose-options { display: flex; align-items: center; gap: .75rem; } #messages_page .mg-check-label { display: flex; align-items: center; gap: .35rem; font-family: var(--fu); font-size: .72rem; color: var(--mg-mut); cursor: pointer; user-select: none; } #messages_page .mg-check-label input[type=checkbox] { accent-color: var(--mg); width: 13px; height: 13px; } #messages_page .mg-textarea-wrap { position: relative; } #messages_page .mg-compose-ta { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--mg-bdr); border-radius: 8px; color: var(--mg-txt); font-family: var(--fu); font-size: .83rem; padding: .65rem .85rem; resize: none; min-height: 64px; max-height: 160px; transition: border-color .18s, box-shadow .18s; line-height: 1.5; } #messages_page .mg-compose-ta:focus { outline: none; border-color: var(--mg); box-shadow: 0 0 0 3px var(--mg-dim); background: rgba(255,255,255,.06); } #messages_page .mg-compose-ta::placeholder { color: var(--mg-mut); } #messages_page .mg-compose-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; gap: .65rem; } #messages_page .mg-compose-secret { flex: 1; } #messages_page .mg-secret-input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--mg-bdr); border-radius: 7px; color: var(--mg-txt); font-family: var(--fu); font-size: .8rem; padding: .42rem .8rem; transition: border-color .18s; } #messages_page .mg-secret-input:focus { outline: none; border-color: var(--mg); box-shadow: 0 0 0 2px var(--mg-dim); } #messages_page .mg-send-btn { display: flex; align-items: center; gap: .4rem; padding: .48rem 1.25rem; background: var(--mg); border: none; border-radius: 7px; color: #0d0f13; font-family: var(--fu); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .16s; flex-shrink: 0; } #messages_page .mg-send-btn:hover { background: var(--mg-lt); } #messages_page .mg-send-btn:disabled { opacity: .45; cursor: not-allowed; } #messages_page .mg-notify { padding: .4rem 1.2rem; font-family: var(--fu); font-size: .76rem; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; border-bottom: 1px solid transparent; display: none; } #messages_page .mg-notify.ok { background: rgba(46,204,138,.08); border-color: rgba(46,204,138,.2); color: var(--mg-ok); } #messages_page .mg-notify.err { background: rgba(224,92,92,.08); border-color: rgba(224,92,92,.2); color: var(--mg-err); } @media (max-width: 900px) { #messages_page .mg-folders { display: none; } #messages_page .mg-threads { width: 260px; } } @media (max-width: 640px) { #messages_page .mg-threads { display: none; } #messages_page .mg-threads.mobile-show { display: flex; width: 100%; } } /* ===== Domains Page ===== */ #domains_page { --dm: #c9a84c; --dm-lt: #e8c96a; --dm-dim: rgba(201,168,76,.14); --dm-card: #181c27; --dm-surf: #13161e; --dm-bdr: rgba(201,168,76,.2); --dm-txt: #e8e3d5; --dm-mut: rgba(232,227,213,.46); --dm-ok: #2ecc8a; --dm-warn: #e8a83c; --dm-err: #e05c5c; --dm-info: #5c9ee8; --dm-r: 10px; --dm-rl: 16px; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; padding: 0 0 2.5rem; } #domains_page .dm-title { font-family: var(--fd); font-size: 1.35rem; letter-spacing: .02em; color: var(--dm); margin: 0 0 1.25rem; padding-bottom: .55rem; border-bottom: 1px solid var(--dm-bdr); display: flex; align-items: center; gap: .6rem; } #domains_page .dm-title i { font-size: 1rem; opacity: .85; } #domains_page .dm-card { background: var(--dm-card); border: 1px solid var(--dm-bdr); border-radius: var(--dm-rl); overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.38); margin-bottom: 1.5rem; } #domains_page .dm-card-hd { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent); border-bottom: 1px solid var(--dm-bdr); padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } #domains_page .dm-card-hd-title { font-family: var(--fd); font-size: 1rem; color: var(--dm); letter-spacing: .04em; margin: 0; } #domains_page .dm-card-body { padding: 1.25rem; } #domains_page .dm-hero { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; flex-wrap: wrap; } #domains_page .dm-hero-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--dm-dim); border: 2px solid var(--dm-bdr); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #domains_page .dm-hero-icon i { font-size: 1.6rem; color: var(--dm); } #domains_page .dm-hero-info { flex: 1; min-width: 0; } #domains_page .dm-hero-domain { font-family: var(--fm); font-size: 1.55rem; font-weight: 700; color: var(--dm); letter-spacing: .04em; word-break: break-all; margin-bottom: .25rem; } #domains_page .dm-hero-sub { font-family: var(--fu); font-size: .78rem; color: var(--dm-mut); display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; } #domains_page .dm-hero-sub i { font-size: .72rem; } #domains_page .dm-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; } #domains_page .dm-no-domain { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; } #domains_page .dm-no-domain-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(201,168,76,.07); border: 1px dashed rgba(201,168,76,.3); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } #domains_page .dm-no-domain-icon i { font-size: 1.8rem; color: rgba(201,168,76,.4); } #domains_page .dm-no-domain h4 { font-family: var(--fd); font-size: 1.1rem; color: var(--dm-mut); margin-bottom: .45rem; letter-spacing: .02em; } #domains_page .dm-no-domain p { font-family: var(--fu); font-size: .8rem; color: var(--dm-mut); max-width: 340px; margin: 0 0 1.25rem; line-height: 1.6; } #domains_page .dm-badge { display: inline-flex; align-items: center; gap: .28rem; padding: .22em .7em; border-radius: 50px; font-family: var(--fu); font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border: 1px solid transparent; } #domains_page .dm-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } #domains_page .dm-badge-active { background: rgba(46,204,138,.1); border-color: rgba(46,204,138,.3); color: #2ecc8a; } #domains_page .dm-badge-expired { background: rgba(224,92,92,.1); border-color: rgba(224,92,92,.3); color: #e05c5c; } #domains_page .dm-badge-pending { background: rgba(232,168,60,.1); border-color: rgba(232,168,60,.3); color: #e8a83c; } #domains_page .dm-badge-transfer { background: rgba(92,158,232,.1); border-color: rgba(92,158,232,.3); color: #5c9ee8; } #domains_page .dm-btn { display: inline-flex; align-items: center; gap: .38rem; padding: .42rem 1rem; border-radius: 7px; font-family: var(--fu); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: all .16s; white-space: nowrap; text-decoration: none; line-height: 1.4; } #domains_page .dm-btn-gold { background: var(--dm); color: #0d0f13; border-color: var(--dm); } #domains_page .dm-btn-gold:hover { background: var(--dm-lt); border-color: var(--dm-lt); color: #0d0f13; } #domains_page .dm-btn-ol { background: transparent; color: var(--dm); border-color: var(--dm-bdr); } #domains_page .dm-btn-ol:hover { background: var(--dm-dim); border-color: var(--dm); } #domains_page .dm-btn-warn { background: rgba(232,168,60,.1); color: var(--dm-warn); border-color: rgba(232,168,60,.3); } #domains_page .dm-btn-warn:hover { background: rgba(232,168,60,.2); } #domains_page .dm-btn-info { background: rgba(92,158,232,.1); color: var(--dm-info); border-color: rgba(92,158,232,.3); } #domains_page .dm-btn-info:hover { background: rgba(92,158,232,.2); } #domains_page .dm-btn-err { background: rgba(224,92,92,.1); color: var(--dm-err); border-color: rgba(224,92,92,.3); } #domains_page .dm-btn-err:hover { background: rgba(224,92,92,.2); } #domains_page .dm-btn-sm { padding: .28rem .7rem; font-size: .68rem; } #domains_page .dm-btn:disabled { opacity: .42; cursor: not-allowed; } #domains_page .dm-search-wrap { display: flex; gap: .5rem; align-items: stretch; max-width: 520px; width: 100%; } #domains_page .dm-search-input { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--dm-bdr); border-radius: 8px; color: var(--dm-txt); font-family: var(--fm); font-size: .83rem; padding: .52rem .9rem; transition: border-color .2s, box-shadow .2s; } #domains_page .dm-search-input:focus { outline: none; border-color: var(--dm); box-shadow: 0 0 0 3px var(--dm-dim); background: rgba(255,255,255,.06); } #domains_page .dm-search-input::placeholder { color: var(--dm-mut); } #domains_page .dm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; } #domains_page .dm-stat { background: var(--dm-card); border: 1px solid var(--dm-bdr); border-radius: var(--dm-r); padding: .85rem 1rem; position: relative; overflow: hidden; } #domains_page .dm-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--dm); border-radius: 2px 0 0 2px; } #domains_page .dm-stat-lbl { font-family: var(--fu); font-size: .63rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dm-mut); margin-bottom: .25rem; } #domains_page .dm-stat-val { font-family: var(--fm); font-size: 1rem; color: var(--dm-txt); font-weight: 600; word-break: break-all; } #domains_page .dm-stat-val.gold { color: var(--dm); } #domains_page .dm-tbl-wrap { overflow-x: auto; } #domains_page .dm-tbl { width: 100%; border-collapse: collapse; font-family: var(--fu); font-size: .81rem; } #domains_page .dm-tbl thead tr { border-bottom: 1px solid var(--dm-bdr); } #domains_page .dm-tbl thead th { font-family: var(--fu); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dm); font-weight: 700; padding: .6rem 1rem; text-align: left; white-space: nowrap; } #domains_page .dm-tbl tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .13s; } #domains_page .dm-tbl tbody tr:hover { background: rgba(201,168,76,.04); } #domains_page .dm-tbl tbody td { padding: .65rem 1rem; color: var(--dm-txt); vertical-align: middle; } #domains_page .dm-tbl tbody td.mono { font-family: var(--fm); font-size: .78rem; } #domains_page .dm-link { color: var(--dm); text-decoration: none; font-family: var(--fm); font-size: .78rem; } #domains_page .dm-link:hover { color: var(--dm-lt); text-decoration: underline; } #domains_page .dm-empty { text-align: center; padding: 3rem 1rem; color: var(--dm-mut); font-family: var(--fu); font-size: .82rem; } #domains_page .dm-empty i { font-size: 2rem; display: block; margin-bottom: .6rem; color: rgba(201,168,76,.15); } #domains_page .dm-notice { background: var(--dm-dim); border: 1px solid var(--dm-bdr); border-left: 3px solid var(--dm); border-radius: 0 8px 8px 0; padding: .65rem .95rem; font-family: var(--fu); font-size: .78rem; color: var(--dm-txt); display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; } #domains_page .dm-notice i { color: var(--dm); font-size: .85rem; flex-shrink: 0; } #domains_page .dm-notice.warn { border-left-color: var(--dm-warn); } #domains_page .dm-notice.warn i { color: var(--dm-warn); } #domains_page .dm-notice.err { border-left-color: var(--dm-err); } #domains_page .dm-notice.err i { color: var(--dm-err); } #domains_page .dm-spinner { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; } #domains_page .dm-spinner .spinner-border { color: var(--dm); width: 1.5rem; height: 1.5rem; border-width: 2px; } /* ===== HEADER (top navbar) ===== */ #header .navbar-main { background: var(--sw-card) !important; border-bottom: 1px solid var(--sw-bdr) !important; backdrop-filter: blur(10px); box-shadow: 0 2px 16px rgba(0,0,0,.45) !important; border-radius: 0 0 12px 12px !important; } /* Sidenav toggler lines */ .sidenav-toggler-line { background: var(--sw-gold) !important; height: 2px; border-radius: 2px; } #iconNavbarSidenav { color: var(--sw-mut) !important; } #iconNavbarSidenav:hover { color: var(--sw-gold) !important; } /* Chain selector dropdown */ #chain_dropdown .btn { background: rgba(201,168,76,.1) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 50rem; color: var(--sw-gold) !important; font-family: var(--fm); font-size: .73rem; font-weight: 600; letter-spacing: .04em; transition: background .15s; } #chain_dropdown .btn:hover { background: var(--sw-gold-dim) !important; border-color: var(--sw-gold) !important; } #chain_dropdown .dropdown-menu { background: var(--sw-surf); border: 1px solid var(--sw-bdr); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.5); } #chain_dropdown .dropdown-item { color: var(--sw-txt); font-family: var(--fu); font-size: .8rem; } #chain_dropdown .dropdown-item:hover { background: var(--sw-gold-dim); color: var(--sw-gold); } /* Nav icon buttons */ #header .navbar-nav .nav-link { color: var(--sw-mut) !important; transition: color .15s; } #header .navbar-nav .nav-link:hover { color: var(--sw-gold) !important; } /* Connection indicator badge */ #confirmation_rate_indicator { border-radius: 50px; padding: .25em .6em; font-size: .72rem; display: inline-flex; align-items: center; gap: .25rem; border: 1px solid rgba(255,255,255,.1); } #confirmation_rate_indicator i { font-size: .72rem; } /* Notification badges */ #unconfirmed_notification_menu .badge, #phasing_notification_menu .badge, #shuffling_notification_menu .badge { background: var(--sw-card) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 50px; padding: .28em .65em; } #notification_menu .badge { border-radius: 50px; font-size: .65rem; } /* Tools dropdown */ #toolsDropdown { color: var(--sw-mut) !important; } #toolsDropdown:hover { color: var(--sw-gold) !important; } #header .navbar-nav .dropdown-menu { background: var(--sw-surf) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,.5) !important; padding: .5rem; } #header .navbar-nav .dropdown-item { border-radius: 8px; color: var(--sw-txt) !important; font-family: var(--fu); font-size: .8rem; transition: background .13s, color .13s; } #header .navbar-nav .dropdown-item:hover { background: var(--sw-gold-dim) !important; color: var(--sw-gold) !important; } #header .navbar-nav .dropdown-item h6 { font-family: var(--fu); font-size: .8rem; font-weight: 500; color: inherit; margin: 0; } #header .navbar-nav .dropdown-item .material-icons-round { color: var(--sw-gold) !important; font-size: 1.1rem; } /* Search bar */ #id_search { background: rgba(255,255,255,.04) !important; padding: .22rem .6rem !important; display: flex; align-items: center; box-shadow: none !important; } #id_search:focus-within { border-color: var(--sw-gold-dim) !important; box-shadow: 0 0 0 3px var(--sw-gold-dim) !important; } #id_search input { background: transparent !important; border-radius: 50rem !important; border: var(--sw-gold) !important; color: var(--sw-gold) !important; font-family: var(--fm); font-size: .8rem; box-shadow: none !important; padding: .2rem .4rem !important; } #id_search input::placeholder { color: var(--sw-gold) !important; } #id_search input:focus { box-shadow: none !important; outline: none !important; } #search-btn { color: var(--sw-gold) !important; padding: .15rem .4rem; } #search-btn:hover { color: var(--sw-gold) !important; } /* ===== LOCKSCREEN ===== */ #lockscreen { background: var(--sw-dark); color: var(--sw-txt); font-family: var(--fu); } /* Top navbar (on lockscreen) */ #login_panel .navbar.blur { background: rgba(24,28,39,.96) !important; border-bottom: 1px solid var(--sw-bdr) !important; backdrop-filter: blur(16px) !important; box-shadow: 0 4px 20px rgba(0,0,0,.45) !important; } #login_chain_selector .btn { background: rgba(201,168,76,.12) !important; border: 1px solid var(--sw-bdr) !important; color: var(--sw-gold) !important; font-family: var(--fm); font-size: .76rem; font-weight: 600; letter-spacing: .04em; } #login_chain_selector .btn:hover { background: var(--sw-gold-dim) !important; } #login_chain_selector .dropdown-menu { background: var(--sw-surf) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 10px !important; } #login_chain_selector .dropdown-item { color: var(--sw-txt) !important; } #login_chain_selector .dropdown-item:hover { background: var(--sw-gold-dim) !important; color: var(--sw-gold) !important; } .navbar-toggler-bar { background: var(--sw-gold) !important; } /* Navbar items (offline actions, direct access) */ #login_panel .navbar-nav .card-header { background: transparent !important; border: none !important; } #login_panel .navbar-nav .card-header h4 { font-family: var(--fd); color: var(--sw-gold); font-size: 1rem; letter-spacing: .04em; } #login_panel .navbar-nav h6 { color: var(--sw-mut) !important; font-family: var(--fu); font-size: .78rem; } #login_panel .navbar-nav hr.horizontal { border-color: var(--sw-bdr) !important; opacity: 1 !important; } #login_panel .navbar-nav .nav-link { color: var(--sw-mut) !important; font-family: var(--fu); font-size: .8rem; } #login_panel .navbar-nav .nav-link:hover { color: var(--sw-gold) !important; } #login_panel .navbar i.text-dark, #login_panel .navbar .text-dark { color: var(--sw-mut) !important; } #login_panel .navbar .btn.bg-gradient-dark { background: rgba(201,168,76,.1) !important; border: 1px solid var(--sw-bdr) !important; color: var(--sw-gold) !important; font-size: .7rem; font-weight: 700; letter-spacing: .06em; border-radius: 7px; } /* Login card */ #login_panel .page-header { background: transparent !important; } #login_panel .card.z-index-0 { background: var(--sw-card) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,.6) !important; overflow: hidden; } #login_panel .card.z-index-0 .card-header { background: var(--sw-card) !important; border-bottom: 1px solid var(--sw-bdr) !important; padding: 1rem 1.25rem !important; } #login_buttons { background: rgba(0,0,0,.35) !important; border-radius: 12px !important; padding: .35rem !important; gap: .25rem; display: flex !important; } #login_buttons .nav-link { background: transparent !important; border: 1px solid transparent !important; border-radius: 9px !important; color: rgba(232,227,213,.72) !important; font-family: var(--fu); font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .48rem .65rem !important; transition: all .16s; display: flex !important; align-items: center; justify-content: center; gap: .3rem; white-space: nowrap; } #login_buttons .nav-link:hover { background: rgba(201,168,76,.1) !important; border-color: rgba(201,168,76,.2) !important; } #login_buttons .nav-link.active { background: rgba(201,168,76,.18) !important; border-color: rgba(201,168,76,.4) !important; color: var(--sw-gold) !important; box-shadow: none; } #login_buttons .nav-link i { font-size: .82rem; } /* Login forms */ #login_account_container .card-body, #login_password_container .card-body, #hardware_wallet_container .card-body, #seed_wallet_container .card-body { background: var(--sw-card) !important; } #login_panel .card-body label, #login_panel .card-body .form-label { font-family: var(--fu); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sw-mut) !important; } #login_panel .card-body .form-control, #login_panel .card-body select.form-control { background: rgba(255,255,255,.04) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 8px !important; color: var(--sw-txt) !important; font-family: var(--fm); font-size: .83rem; transition: border-color .2s, box-shadow .2s; } #login_panel .card-body .form-control:focus { border-color: var(--sw-gold) !important; box-shadow: 0 0 0 3px var(--sw-gold-dim) !important; background: rgba(255,255,255,.06) !important; } #login_panel .card-body .form-control::placeholder { color: var(--sw-mut) !important; } #login_password_account, #login_master_public_key, #step_2_account { background: rgba(255,255,255,.025) !important; color: var(--sw-gold) !important; font-family: var(--fm) !important; opacity: .8; } #step_2_generated_secret { background: rgba(46,204,138,.05) !important; border-color: rgba(46,204,138,.2) !important; color: var(--sw-ok) !important; font-family: var(--fm) !important; } #step_3_confirm_secret { background: rgba(255,255,255,.04) !important; color: var(--sw-txt) !important; font-family: var(--fm) !important; } #login_hardware_account, #login_seed_account, #secret_generator_wordlist_length { background: rgba(255,255,255,.04) !important; color: var(--sw-txt) !important; } #login_hardware_account option, #login_seed_account option, #secret_generator_wordlist_length option { background: var(--sw-surf); color: var(--sw-txt); } #login_panel .form-check-input { border: 1px solid var(--sw-bdr) !important; background-color: rgba(255,255,255,.06) !important; } #login_panel .form-check-input:checked { background-color: var(--sw-gold) !important; border-color: var(--sw-gold) !important; } #login_account.dropdown-menu { background: var(--sw-surf) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 10px !important; } #login_account .dropdown-item, #login_account .selectAccount { color: var(--sw-txt) !important; font-family: var(--fm); font-size: .8rem; } #login_account .dropdown-item:hover { background: var(--sw-gold-dim) !important; color: var(--sw-gold) !important; } #login_account .removeAccount { color: var(--sw-err) !important; font-size: .7rem; } #account_dropdown { color: var(--sw-gold) !important; font-family: var(--fu); font-size: .8rem; } .scan-qr-code i { color: var(--sw-mut) !important; } .scan-qr-code:hover i { color: var(--sw-gold) !important; } .creation_link { color: var(--sw-info) !important; font-family: var(--fu); font-size: .78rem; } .creation_link:hover { color: var(--sw-gold) !important; } /* Alerts inside login card */ #login_panel .alert-info, #seed_wallet_info, #hardware_wallet_info { background: rgba(92,158,232,.08) !important; border: 1px solid rgba(92,158,232,.25) !important; border-radius: 8px !important; color: var(--sw-info) !important; font-family: var(--fu); font-size: .8rem; } #login_panel .alert-warning, #testnet_login, .custom_login_warning { background: rgba(232,168,60,.08) !important; border: 1px solid rgba(232,168,60,.25) !important; border-radius: 8px !important; color: var(--sw-warn) !important; font-family: var(--fu); font-size: .8rem; } #login_error, #proxy_connection_error { background: rgba(224,92,92,.08) !important; border: 1px solid rgba(224,92,92,.25) !important; border-radius: 8px !important; color: var(--sw-err) !important; font-family: var(--fu); font-size: .8rem; } .callout.callout-info, .callout.callout-danger { background: rgba(92,158,232,.06) !important; border-left: 3px solid var(--sw-info) !important; border-radius: 0 8px 8px 0 !important; color: var(--sw-txt) !important; } .callout.callout-danger { border-left-color: var(--sw-err) !important; } #login_panel .alert-warning.callout { background: rgba(232,168,60,.06) !important; border-left: 3px solid var(--sw-warn); color: var(--sw-txt) !important; } /* Login buttons */ .show_advanced_load, #login_hardware_advanced, #login_seed_advanced { background: rgba(92,158,232,.1) !important; border: 1px solid rgba(92,158,232,.3) !important; color: var(--sw-info) !important; border-radius: 8px; font-family: var(--fu); font-size: .75rem; font-weight: 700; } .show_advanced_load:hover, #login_hardware_advanced:hover, #login_seed_advanced:hover { background: rgba(92,158,232,.2) !important; } #login_hardware_load_accounts, #login_seed_load_accounts { background: rgba(46,204,138,.1) !important; border: 1px solid rgba(46,204,138,.3) !important; color: var(--sw-ok) !important; border-radius: 8px; font-family: var(--fu); font-size: .75rem; font-weight: 700; } #proxy_connection_error .btn { background: rgba(46,204,138,.1) !important; border: 1px solid rgba(46,204,138,.3) !important; color: var(--sw-ok) !important; border-radius: 8px; font-size: .75rem; } #login_btn { background: linear-gradient(135deg, var(--sw-gold), #a8842a) !important; border: none !important; color: #0d0f13 !important; font-family: var(--fu); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 9px; padding: .55rem 1.75rem; box-shadow: 0 4px 16px rgba(201,168,76,.35); transition: all .18s; } #login_btn:hover { background: linear-gradient(135deg, var(--sw-gold-lt), var(--sw-gold)) !important; box-shadow: 0 6px 24px rgba(201,168,76,.5); transform: translateY(-1px); } .create-mnemonic-cancel, .create-custom-passphrase-cancel { background: rgba(224,92,92,.1) !important; border: 1px solid rgba(224,92,92,.3) !important; color: var(--sw-err) !important; border-radius: 8px; font-family: var(--fu); font-size: .75rem; font-weight: 700; } .create-passphrase-next, .verify-generated-mnemonic, .create-custom-passphrase-next { background: linear-gradient(135deg, var(--sw-gold), #a8842a) !important; border: none !important; color: #0d0f13 !important; border-radius: 8px; font-family: var(--fu); font-size: .75rem; font-weight: 700; } #login_panel .card-footer { background: rgba(0,0,0,.25) !important; border-top: 1px solid var(--sw-bdr) !important; border-radius: 0 0 16px 16px !important; padding: .85rem 1.5rem !important; } /* Account/seed creation panels */ #account_phrase_custom_panel, #account_phrase_generator_panel { background: var(--sw-card) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,.6) !important; padding: 1.5rem !important; } #account_phrase_custom_panel .card-header, #account_phrase_generator_panel .card-header { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent) !important; border-bottom: 1px solid var(--sw-bdr) !important; padding: .75rem 1rem !important; font-family: var(--fd); color: var(--sw-gold); } #custom_passphrase_link, #generator_paper_wallet_link { color: var(--sw-info) !important; font-family: var(--fu); font-size: .8rem; } #custom_passphrase_link:hover, #generator_paper_wallet_link:hover { color: var(--sw-gold) !important; } #secret_generator_wordlist_length { display: inline-block; width: auto; background: rgba(255,255,255,.04) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 8px !important; color: var(--sw-txt) !important; font-family: var(--fu); font-size: .8rem; padding: .3rem .65rem; } #lockscreen_active_plugins_warning .label { background: var(--sw-gold-dim) !important; border: 1px solid var(--sw-bdr) !important; color: var(--sw-gold) !important; border-radius: 6px; padding: .2em .6em; font-family: var(--fu); font-size: .72rem; } #lockscreen_active_plugins_warning label { color: var(--sw-mut) !important; font-family: var(--fu); font-size: .8rem; } /* ===== TESTNET WARNING BANNER ===== */ #testnet_warning { background: linear-gradient(90deg, rgba(232,168,60,.15), rgba(232,168,60,.08)); border-bottom: 1px solid rgba(232,168,60,.35); color: var(--sw-warn); font-family: var(--fu); font-size: .75rem; padding: .45rem 1.25rem; text-align: center; cursor: pointer; letter-spacing: .04em; transition: opacity .2s; } #testnet_warning:hover { opacity: .75; } #testnet_warning.testnet-collapse { display: none !important; } /* ===== INITIAL LOADING SPINNER ===== */ #progress-container { position: fixed; inset: 0; background: var(--sw-dark); z-index: 9999; pointer-events: none; } #spinner { background: var(--sw-dark) !important; } .stage { position:relative; width:100%; flex:1; display:flex; align-items:flex-start; justify-content:center; padding-top:clamp(10px,2vh,30px); } .goo-bg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(520px,130vw); height:min(520px,130vw); background:radial-gradient(circle at center, #0a0a0a 0%, rgba(10,10,10,0.7) 32%, rgba(0,0,0,0.9) 60%, #000 72%); border-radius:50%; pointer-events:none; z-index:1; opacity:0.9; } .goo-container { position:relative; width:min(320px,86vw); height:300px; max-height:42vh; z-index:2; transform:translateZ(0); } .goo-layer { position:absolute; inset:0; filter:url(#goo); will-change:filter; } .center-blob, .center-phantom { position:absolute; left:50%; top:50%; width:80px; height:80px; margin:-40px 0 0 -40px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #ffd1ec 0%, #FF3FB1 28%, #A64DFF 68%, #3FB7FF 100%); will-change:transform; } .center-blob.main { z-index:10; box-shadow:0 0 40px 8px rgba(255,63,177,0.35), 0 0 80px 20px rgba(166,77,255,0.2), 0 0 120px 30px rgba(63,183,255,0.12), inset 0 0 20px rgba(255,255,255,0.25); animation:centerPulse 3.8s ease-in-out infinite; } .center-phantom { z-index:1; /* no shadow, sits under main, used only for goo */ opacity:0.999; } @keyframes centerPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} } .blob { position:absolute; left:50%; top:50%; width:var(--size); height:var(--size); margin:calc(var(--size)/-2) 0 0 calc(var(--size)/-2); border-radius:50%; background:var(--color); box-shadow:0 0 22px 3px var(--glow), 0 0 44px 8px var(--glow-dim); will-change:transform; animation:breathe var(--dur) cubic-bezier(0.45,0,0.55,1) infinite; animation-delay:var(--delay); backface-visibility:hidden; transform:translate3d(0,0,0) scale(0.85); } .blob::before { content:''; position:absolute; inset:-15%; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 55%); filter:blur(2px); opacity:0.6; mix-blend-mode:screen; } @keyframes breathe { 0% { transform:translate3d(0,0,0) scale(0.8) } 22% { transform:translate3d(calc(var(--x)*0.35), calc(var(--y)*0.35), 0) scale(0.95) } 45% { transform:translate3d(calc(var(--x)*0.92), calc(var(--y)*0.92), 0) scale(1.12) } 50% { transform:translate3d(var(--x), var(--y), 0) scale(1.2) } 55% { transform:translate3d(calc(var(--x)*0.92), calc(var(--y)*0.92), 0) scale(1.15) } 78% { transform:translate3d(calc(var(--x)*0.35), calc(var(--y)*0.35), 0) scale(0.95) } 100% { transform:translate3d(0,0,0) scale(0.8) } } .vignette { position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.5) 85%, black 100%); z-index:20; } @media (max-width:480px) { .center-blob, .center-phantom { width:72px; height:72px; margin:-36px 0 0 -36px; } .goo-container { height:280px; } } .svg-filters { position:absolute; width:0; height:0; overflow:hidden; } /* ===== LAYOUT SHELL ===== */ #page { min-height: 100vh; } .main-content { background: var(--sw-dark) !important; min-height: 100vh; } .back-to-login { background: rgba(201,168,76,.1) !important; border: 1px solid var(--sw-bdr) !important; color: var(--sw-gold) !important; font-family: var(--fu); font-size: .73rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 7px; padding: .35rem .9rem; transition: all .16s; } .back-to-login:hover { background: var(--sw-gold-dim) !important; border-color: var(--sw-gold) !important; } /* ===== SIDEBAR ===== */ #sidenav-main { background: var(--sw-card) !important; border: 1px solid var(--sw-card) !important; margin-top: 5rem; box-shadow: 4px 0 24px rgba(0,0,0,.45) !important; } #sidenav-main .sidenav-header .card { background: linear-gradient(135deg, rgba(201,168,76,.1), rgba(201,168,76,.04)) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 12px !important; box-shadow: none !important; } #header_account_id { font-family: var(--fm); font-size: .78rem; color: var(--sw-gold) !important; letter-spacing: .03em; } #account_id_dropdown .dropdown-menu { background: var(--sw-surf); border: 1px solid var(--sw-bdr); border-radius: 10px; } #account_id_dropdown .dropdown-item { color: var(--sw-txt); font-family: var(--fu); font-size: .8rem; } #account_id_dropdown .dropdown-item:hover { background: var(--sw-gold-dim); color: var(--sw-gold); } #sidenav-main .horizontal { border-color: var(--sw-bdr) !important; opacity: 1 !important; } #sidenav-main .navbar-nav .nav-link { color: var(--sw-mut) !important; font-family: var(--fu); font-size: .82rem; font-weight: 500; border-radius: 8px; padding: .5rem .75rem !important; transition: background .15s, color .15s; } #sidenav-main .navbar-nav .nav-link:hover, #sidenav-main .navbar-nav .nav-link.active { background: var(--sw-gold-dim) !important; color: var(--sw-gold) !important; } #sidenav-main .navbar-nav .nav-link span { color: inherit !important; } .sidenav-footer { background: var(--sw-card) !important; border-top: 1px solid var(--sw-bdr) !important; } .sidenav-footer .nav-link { color: var(--sw-mut) !important; font-family: var(--fu); font-size: .75rem; } .sidenav-footer .nav-link:hover { color: var(--sw-gold) !important; } #sidebar_block_link { font-family: var(--fm); font-size: .72rem; color: var(--sw-gold) !important; } #connected_indicator { color: var(--sw-ok) !important; } .sidenav-footer .avatar { background: rgba(201,168,76,.12) !important; border: 1px solid var(--sw-bdr); } .sidenav-footer h6 { font-family: var(--fu); font-size: .75rem; color: var(--sw-txt) !important; margin: 0; } /* ===== QUICK‑TOOLS PANEL (fixed-plugin) ===== */ .fixed-plugin .card { background: var(--sw-card) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,.55) !important; } .fixed-plugin .card-header { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent) !important; border-bottom: 1px solid var(--sw-bdr) !important; } .fixed-plugin .card-header h5 { font-family: var(--fd); font-size: 1rem; color: var(--sw-gold); letter-spacing: .04em; margin: 0; } .fixed-plugin-button { background: var(--sw-card) !important; border: 1px solid var(--sw-bdr) !important; border-radius: 50% !important; width: 44px; height: 44px; display: flex !important; align-items: center; justify-content: center; color: var(--sw-gold) !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; transition: background .16s, border-color .16s; } .fixed-plugin-button:hover { background: var(--sw-gold-dim) !important; border-color: var(--sw-gold) !important; } .fixed-plugin .card-body a.d-flex { color: var(--sw-txt) !important; padding: .45rem .5rem; border-radius: 8px; transition: background .13s, color .13s; text-decoration: none; } .fixed-plugin .card-body a.d-flex:hover { background: var(--sw-gold-dim); color: var(--sw-gold) !important; } .fixed-plugin .card-body h6 { font-family: var(--fu); font-size: .8rem; color: inherit; margin: 0; } .fixed-plugin .card-body .avatar { background: rgba(201,168,76,.12) !important; border: 1px solid var(--sw-bdr); color: var(--sw-gold) !important; flex-shrink: 0; } .fixed-plugin .horizontal { border-color: var(--sw-bdr) !important; opacity: 1 !important; margin: .35rem 0 !important; } .fixed-plugin-close-button { color: var(--sw-mut) !important; transition: color .15s; } .fixed-plugin-close-button:hover { color: var(--sw-gold) !important; } /* ========================================================================== LIGHT MODE THEME ========================================================================== Activate by setting `data-bs-theme="light"` on the element. All existing variables are redefined for light backgrounds. ========================================================================== */ [data-bs-theme="light"] { /* ── Global tokens ─────────────────────────────────────────── */ --sw-gold: #c9a84c; --sw-gold-lt: #b38f2f; /* darker gold for better contrast on light */ --sw-gold-dim: rgba(201,168,76,.12); --sw-dark: #f8f9fa; /* light background */ --sw-surf: #ffffff; /* main surface */ --sw-card: #ffffff; /* card background */ --sw-bdr: rgba(0, 0, 0, 0.12); --sw-txt: #212529; /* dark text */ --sw-mut: rgba(0, 0, 0, 0.55); --sw-ok: #2ecc8a; --sw-warn: #e8a83c; --sw-err: #e05c5c; --sw-info: #5c9ee8; --fd: 'DM Serif Display', Georgia, serif; --fm: 'IBM Plex Mono', 'Courier New', monospace; --fu: 'IBM Plex Sans', system-ui, sans-serif; /* ── Asset Exchange page ──────────────────────────────────── */ --ae-gold: var(--sw-gold); --ae-gold-lt: var(--sw-gold-lt); --ae-gold-dim: var(--sw-gold-dim); --ae-card: var(--sw-card); --ae-surf: var(--sw-surf); --ae-bdr: var(--sw-bdr); --ae-txt: var(--sw-txt); --ae-mut: var(--sw-mut); --ae-ok: var(--sw-ok); --ae-warn: var(--sw-warn); --ae-err: var(--sw-err); --ae-info: var(--sw-info); --ae-buy: var(--sw-ok); --ae-sell: var(--sw-err); /* ── ShamwariPay page ─────────────────────────────────────── */ --sp: var(--sw-gold); --sp-lt: var(--sw-gold-lt); --sp-dim: var(--sw-gold-dim); --sp-card: var(--sw-card); --sp-surf: var(--sw-surf); --sp-bdr: var(--sw-bdr); --sp-txt: var(--sw-txt); --sp-mut: var(--sw-mut); --sp-ok: var(--sw-ok); --sp-warn: var(--sw-warn); --sp-err: var(--sw-err); --sp-info: var(--sw-info); --sp-buy: var(--sw-ok); --sp-sell: var(--sw-err); /* ── Subscriptions page ───────────────────────────────────── */ --sub: var(--sw-gold); --sub-lt: var(--sw-gold-lt); --sub-dim: var(--sw-gold-dim); --sub-card: var(--sw-card); --sub-surf: var(--sw-surf); --sub-bdr: var(--sw-bdr); --sub-txt: var(--sw-txt); --sub-mut: var(--sw-mut); --sub-ok: var(--sw-ok); --sub-warn: var(--sw-warn); --sub-err: var(--sw-err); --sub-info: var(--sw-info); /* ── Insurance page ───────────────────────────────────────── */ --ig: var(--sw-gold); --ig-lt: var(--sw-gold-lt); --ig-dim: var(--sw-gold-dim); --ig-card: var(--sw-card); --ig-border: var(--sw-bdr); --ig-text: var(--sw-txt); --ig-muted: var(--sw-mut); --ig-ok: var(--sw-ok); --ig-warn: var(--sw-warn); --ig-err: var(--sw-err); --ig-info: var(--sw-info); /* ── Dashboard page ───────────────────────────────────────── */ --dsh: var(--sw-gold); --dsh-lt: var(--sw-gold-lt); --dsh-dim: var(--sw-gold-dim); --dsh-card: var(--sw-card); --dsh-surf: var(--sw-surf); --dsh-bdr: var(--sw-bdr); --dsh-txt: var(--sw-txt); --dsh-mut: var(--sw-mut); --dsh-ok: var(--sw-ok); --dsh-warn: var(--sw-warn); --dsh-err: var(--sw-err); --dsh-info: var(--sw-info); /* ── Digital Certificates page ────────────────────────────── */ --ct: var(--sw-gold); --ct-lt: var(--sw-gold-lt); --ct-dim: var(--sw-gold-dim); --ct-card: var(--sw-card); --ct-surf: var(--sw-surf); --ct-bdr: var(--sw-bdr); --ct-txt: var(--sw-txt); --ct-mut: var(--sw-mut); --ct-ok: var(--sw-ok); --ct-warn: var(--sw-warn); --ct-err: var(--sw-err); --ct-info: var(--sw-info); --ct-r: 10px; --ct-rl: 16px; /* ── Messages page ────────────────────────────────────────── */ --mg: var(--sw-gold); --mg-lt: var(--sw-gold-lt); --mg-dim: var(--sw-gold-dim); --mg-card: var(--sw-card); --mg-surf: var(--sw-surf); --mg-bdr: var(--sw-bdr); --mg-txt: var(--sw-txt); --mg-mut: var(--sw-mut); --mg-ok: var(--sw-ok); --mg-err: var(--sw-err); --mg-info: var(--sw-info); --mg-r: 10px; --pane-folder: 220px; --pane-list: 320px; /* ── Domains page ─────────────────────────────────────────── */ --dm: var(--sw-gold); --dm-lt: var(--sw-gold-lt); --dm-dim: var(--sw-gold-dim); --dm-card: var(--sw-card); --dm-surf: var(--sw-surf); --dm-bdr: var(--sw-bdr); --dm-txt: var(--sw-txt); --dm-mut: var(--sw-mut); --dm-ok: var(--sw-ok); --dm-warn: var(--sw-warn); --dm-err: var(--sw-err); --dm-info: var(--sw-info); --dm-r: 10px; --dm-rl: 16px; } /* ── Additional overrides for elements with hardcoded dark backgrounds ── */ [data-bs-theme="light"] .ct-cert-card { background: linear-gradient(135deg, var(--ct-card) 0%, #f0f0f0 100%) !important; } [data-bs-theme="light"] .ct-cert-card::before, [data-bs-theme="light"] .ct-cert-card::after { opacity: 0.5; } [data-bs-theme="light"] .ct-sig-block { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.5); } [data-bs-theme="light"] .ae-balance-line .val, [data-bs-theme="light"] .ae-meta-value, [data-bs-theme="light"] .ae-txt { color: var(--sw-txt); } [data-bs-theme="light"] .ig-stat::before { background: var(--ig); } [data-bs-theme="light"] .blob-loader-container .blob { filter: brightness(0.9); } [data-bs-theme="light"] .main-blob { background: var(--sw-gold); } [data-bs-theme="light"] .child-blob.shamwari-pink, [data-bs-theme="light"] .child-blob.shamwari-orange, [data-bs-theme="light"] .child-blob.shamwari-purple { opacity: 0.8; } [data-bs-theme="light"] .fixed-plugin .card-body a.d-flex:hover { background: var(--sw-gold-dim); } [data-bs-theme="light"] .sidenav-footer .avatar { background: var(--sw-gold-dim) !important; } [data-bs-theme="light"] #sidenav-main .sidenav-header .card { background: rgba(201,168,76,0.08) !important; } [data-bs-theme="light"] #sidenav-main { border-right-color: var(--sw-bdr) !important; } [data-bs-theme="light"] .back-to-login { background: rgba(201,168,76,0.12) !important; border-color: var(--sw-bdr) !important; } [data-bs-theme="light"] .back-to-login:hover { background: var(--sw-gold-dim) !important; } [data-bs-theme="light"] #testnet_warning { background: #fff3e0; border-bottom-color: #ffd89c; color: #b86f0c; } [data-bs-theme="light"] #progress-container { background: #f8f9fa; } [data-bs-theme="light"] .page-header, [data-bs-theme="light"] .main-content { background: var(--sw-surf) !important; } [data-bs-theme="light"] .card { box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; } [data-bs-theme="light"] .table tbody tr:hover { background: rgba(0,0,0,0.02) !important; } [data-bs-theme="light"] .alert-danger, [data-bs-theme="light"] .alert-warning, [data-bs-theme="light"] .alert-info { background-color: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.1) !important; color: inherit !important; } [data-bs-theme="light"] .alert-danger { border-left-color: var(--sw-err) !important; } [data-bs-theme="light"] .alert-warning { border-left-color: var(--sw-warn) !important; } [data-bs-theme="light"] .alert-info { border-left-color: var(--sw-info) !important; } [data-bs-theme="light"] .input-group.input-group-outline .form-control { border-color: rgba(0,0,0,0.2); } [data-bs-theme="light"] .input-group.input-group-outline .form-control:focus { border-color: var(--sw-gold); } [data-bs-theme="light"] .dropdown-menu { background: #fff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important; } [data-bs-theme="light"] .dropdown-item { color: #212529 !important; } [data-bs-theme="light"] .dropdown-item:hover { background: var(--sw-gold-dim) !important; color: var(--sw-gold) !important; } [data-bs-theme="light"] .modal-content { background: #fff !important; border-color: rgba(0,0,0,0.1) !important; } [data-bs-theme="light"] .modal-header { border-bottom-color: rgba(0,0,0,0.1) !important; background: rgba(0,0,0,0.02) !important; } [data-bs-theme="light"] .modal-footer { border-top-color: rgba(0,0,0,0.1) !important; background: rgba(0,0,0,0.02) !important; } [data-bs-theme="light"] .btn-close { filter: invert(0.4) !important; opacity: 0.6; } [data-bs-theme="light"] .btn-close:hover { filter: invert(0.2) !important; } /* Labels */ .modal .sm-label { display: block; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(201,168,76,.7); margin-bottom: .3rem; } /* Text / number / password inputs */ .modal .sm-input { width: 100%; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(201,168,76,.22) !important; border-radius: 8px !important; color: #e8e3d5 !important; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .83rem; padding: .46rem .8rem; transition: border-color .18s, box-shadow .18s; } .modal .sm-input:focus { border-color: #c9a84c !important; box-shadow: 0 0 0 3px rgba(201,168,76,.16) !important; background: rgba(255,255,255,.06) !important; outline: none; color: #e8e3d5 !important; } .modal .sm-input::placeholder { color: rgba(232,227,213,.3) !important; } .modal .sm-input[readonly] { opacity: .6; cursor: not-allowed; } .modal textarea.sm-input { resize: vertical; min-height: 76px; line-height: 1.55; } /* Password input — extra dot-mask readability */ .modal input[type="password"].sm-input { letter-spacing: .12em; } /* Input group */ .modal .sm-input-group { display: flex; align-items: stretch; } .modal .sm-input-group .sm-input { border-radius: 8px 0 0 8px !important; flex: 1; } .modal .sm-input-group .sm-input-group-text { display: flex; align-items: center; padding: 0 .75rem; background: rgba(201,168,76,.1) !important; border: 1px solid rgba(201,168,76,.22) !important; border-left: none !important; border-radius: 0 8px 8px 0 !important; font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: .76rem; color: #c9a84c; white-space: nowrap; } .modal .sm-input-group .sm-addon-btn { display: flex; align-items: center; justify-content: center; padding: 0 .65rem; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(201,168,76,.22) !important; border-left: none !important; border-radius: 0 !important; color: rgba(232,227,213,.45); cursor: pointer; transition: background .15s, color .15s; font-size: .85rem; } .modal .sm-input-group .sm-addon-btn:last-child { border-radius: 0 8px 8px 0 !important; } .modal .sm-input-group .sm-addon-btn:hover { background: rgba(201,168,76,.12) !important; color: #c9a84c; } /* Select */ .modal .sm-select { appearance: none; width: 100%; background-color: rgba(255,255,255,.04) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .8rem center !important; border: 1px solid rgba(201,168,76,.22) !important; border-radius: 8px !important; color: #e8e3d5 !important; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .83rem; padding: .46rem 2.2rem .46rem .8rem; transition: border-color .18s; } .modal .sm-select:focus { border-color: #c9a84c !important; box-shadow: 0 0 0 3px rgba(201,168,76,.16) !important; outline: none; } .modal .sm-select option { background: #181c27; color: #e8e3d5; } /* Checkbox / radio */ .modal .sm-check { display: flex; align-items: center; gap: .5rem; } .modal .sm-check-input { width: 1rem; height: 1rem; flex-shrink: 0; background-color: rgba(255,255,255,.06) !important; border: 1px solid rgba(201,168,76,.3) !important; border-radius: 3px !important; cursor: pointer; transition: background .15s, border-color .15s; appearance: none; } .modal .sm-check-input[type="radio"] { border-radius: 50% !important; } .modal .sm-check-input:checked { background-color: #c9a84c !important; border-color: #c9a84c !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3L9 1' stroke='%230d0f13' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 70% !important; } .modal .sm-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='2.5' fill='%230d0f13'/%3E%3C/svg%3E") !important; } .modal .sm-check-label { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .8rem; color: rgba(232,227,213,.7); cursor: pointer; margin: 0; } /* Divider line inside modals */ .modal .sm-divider { border-color: rgba(201,168,76,.15) !important; opacity: 1 !important; margin: .85rem 0; } /* Fee range slider */ .modal .sm-range { -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,.08); border-radius: 50px; outline: none; cursor: pointer; flex: 1; transition: background .15s; } .modal .sm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #c9a84c; cursor: pointer; box-shadow: 0 0 0 3px rgba(201,168,76,.2); transition: box-shadow .15s; } .modal .sm-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px rgba(201,168,76,.28); } .modal .sm-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #c9a84c; cursor: pointer; border: none; } .modal .sm-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(201,168,76,.3); } /* Fee priority label */ .modal .sm-priority-text { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: .72rem; font-weight: 700; color: #c9a84c; white-space: nowrap; min-width: 50px; text-align: right; } /* Calculate fee button */ .modal .sm-btn-calc { display: inline-flex; align-items: center; gap: .35rem; background: rgba(201,168,76,.12) !important; border: 1px solid rgba(201,168,76,.28) !important; border-radius: 8px !important; color: #c9a84c !important; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .32rem .85rem; cursor: pointer; transition: all .15s; } .modal .sm-btn-calc:hover { background: rgba(201,168,76,.22) !important; border-color: #c9a84c !important; } .modal .sm-recalc-marker { color: #e8a83c; font-weight: 900; font-size: .85rem; } /* Fee calculation container */ .modal .sm-fee-calc-box { background: rgba(255,255,255,.02); border: 1px solid rgba(201,168,76,.12); border-radius: 10px; padding: .75rem; margin-bottom: .75rem; } .modal .sm-fee-priority-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } /* Advanced section wrapper */ .modal .sm-advanced-box { background: rgba(255,255,255,.018); border: 1px solid rgba(201,168,76,.12); border-radius: 10px; padding: .85rem; margin-top: .5rem; } /* Inline alert variants */ .modal .sm-alert { border-radius: 8px; padding: .55rem .9rem; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .78rem; display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; } .modal .sm-alert i { flex-shrink: 0; font-size: .85rem; margin-top: .05rem; } .modal .sm-alert-info { background: rgba(92,158,232,.09); border: 1px solid rgba(92,158,232,.25); color: #5c9ee8; } .modal .sm-alert-warning { background: rgba(232,168,60,.09); border: 1px solid rgba(232,168,60,.28); color: #e8a83c; } .modal .sm-alert-danger { background: rgba(224,92,92,.09); border: 1px solid rgba(224,92,92,.25); color: #e05c5c; } .modal .sm-alert-gold { background: rgba(201,168,76,.09); border: 1px solid rgba(201,168,76,.22); color: #c9a84c; } .modal .sm-alert a { color: inherit; text-decoration: underline; } /* Hardware wallet status box */ .modal .sm-hw-status { background: rgba(92,158,232,.06); border: 1px solid rgba(92,158,232,.2); border-radius: 8px; padding: .65rem .9rem; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .8rem; color: #5c9ee8; min-height: 2.4rem; } /* Help icon */ .modal .sm-help-icon { color: rgba(201,168,76,.35); font-size: .72rem; cursor: help; vertical-align: middle; transition: color .15s; } .modal .sm-help-icon:hover { color: #c9a84c; } /* Section heading inside templates */ .modal .sm-section-heading { font-family: 'DM Serif Display', Georgia, serif; font-size: .85rem; color: #c9a84c; letter-spacing: .04em; margin: 0 0 .65rem; display: flex; align-items: center; gap: .4rem; } .modal .sm-section-heading::after { content: ''; flex: 1; height: 1px; background: rgba(201,168,76,.15); } /* Inline multi-account / multi-piece row */ .modal .sm-inline-row { display: flex; align-items: stretch; gap: 0; margin-bottom: .5rem; } .modal .sm-inline-row .sm-input { border-radius: 8px 0 0 8px !important; flex: 1; } .modal .sm-inline-btn-remove { display: flex; align-items: center; justify-content: center; padding: 0 .65rem; background: rgba(224,92,92,.08) !important; border: 1px solid rgba(224,92,92,.25) !important; border-left: none !important; border-radius: 0 !important; color: #e05c5c; cursor: pointer; font-size: .8rem; transition: background .15s; } .modal .sm-inline-btn-remove:hover { background: rgba(224,92,92,.18) !important; } .modal .sm-inline-btn-remove:last-child { border-radius: 0 8px 8px 0 !important; } .modal .sm-inline-btn-add-contact { display: flex; align-items: center; justify-content: center; padding: 0 .65rem; background: rgba(46,204,138,.08) !important; border: 1px solid rgba(46,204,138,.25) !important; border-left: none !important; border-radius: 0 8px 8px 0 !important; color: #2ecc8a; cursor: pointer; font-size: .8rem; transition: background .15s; } .modal .sm-inline-btn-add-contact:hover { background: rgba(46,204,138,.18) !important; } .modal .sm-inline-btn-qr { display: flex; align-items: center; justify-content: center; padding: 0 .65rem; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(201,168,76,.22) !important; border-left: none !important; border-radius: 0 !important; color: rgba(201,168,76,.6); cursor: pointer; font-size: .85rem; transition: background .15s, color .15s; } .modal .sm-inline-btn-qr:hover { background: rgba(201,168,76,.1) !important; color: #c9a84c; } /* Contact info row below account input */ .modal .sm-contact-info { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: rgba(232,227,213,.4); min-height: 1rem; padding: .1rem .2rem; } /* Add account / combine buttons */ .modal .sm-btn-add { display: inline-flex; align-items: center; gap: .3rem; background: rgba(46,204,138,.09) !important; border: 1px solid rgba(46,204,138,.28) !important; border-radius: 7px !important; color: #2ecc8a !important; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .75rem; cursor: pointer; transition: all .15s; } .modal .sm-btn-add:hover { background: rgba(46,204,138,.18) !important; } .modal .sm-btn-gold { display: inline-flex; align-items: center; gap: .3rem; background: linear-gradient(135deg,#c9a84c,#a8842a) !important; border: none !important; border-radius: 7px !important; color: #0d0f13 !important; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .75rem; cursor: pointer; transition: all .15s; box-shadow: 0 3px 10px rgba(201,168,76,.25); } .modal .sm-btn-gold:hover { background: linear-gradient(135deg,#e8c96a,#c9a84c) !important; } .modal .sm-btn-info { display: inline-flex; align-items: center; gap: .3rem; background: rgba(92,158,232,.09) !important; border: 1px solid rgba(92,158,232,.28) !important; border-radius: 7px !important; color: #5c9ee8 !important; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .72rem; font-weight: 700; padding: .3rem .75rem; cursor: pointer; transition: all .15s; } .modal .sm-btn-info:hover { background: rgba(92,158,232,.18) !important; } /* Scan QR container */ .modal .scan-qr-code-reader { background: rgba(0,0,0,.4); border: 1px dashed rgba(201,168,76,.3); border-radius: 8px; overflow: hidden; margin-bottom: .65rem; } /* Voucher / bill checkbox group */ .modal .sm-is-voucher-row { background: rgba(255,255,255,.02); border: 1px solid rgba(201,168,76,.1); border-radius: 8px; padding: .45rem .7rem; margin-top: .4rem; display: flex; align-items: center; gap: .6rem; } /* Note-to-self "encrypted" notice */ .modal .sm-encrypted-note { display: flex; align-items: center; gap: .4rem; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .74rem; color: rgba(46,204,138,.7); margin-top: .4rem; } /* Dropdown menu inside modals */ .modal .sm-dropdown-menu { background: #181c27 !important; border: 1px solid rgba(201,168,76,.2) !important; border-radius: 9px !important; box-shadow: 0 8px 28px rgba(0,0,0,.5) !important; padding: .3rem 0 !important; } .modal .sm-dropdown-menu .dropdown-item { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .81rem; color: rgba(232,227,213,.75) !important; padding: .4rem .9rem !important; } .modal .sm-dropdown-menu .dropdown-item:hover { background: rgba(201,168,76,.1) !important; color: #c9a84c !important; } /* ── Permissions Control tokens ───────────────────────────────── */ #permissions_control_page { background: #13161e; color: #e8e3d5; font-family: 'IBM Plex Sans', system-ui, sans-serif; min-height: 100vh; } #permissions_control_page .page-header { background: transparent !important; padding: 1.25rem 0 .5rem; } #permissions_control_page .page-header h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.6rem; color: #c9a84c !important; letter-spacing: .02em; margin: 0; } .pc-card { background: #181c27 !important; border: 1px solid rgba(201,168,76,.2) !important; border-radius: 16px !important; box-shadow: 0 4px 28px rgba(0,0,0,.45) !important; overflow: hidden; margin-bottom: 1.5rem; } .pc-card-hd { background: linear-gradient(90deg, rgba(201,168,76,.09), transparent) !important; border-bottom: 1px solid rgba(201,168,76,.18) !important; padding: .9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; } .pc-card-hd h6 { font-family: 'DM Serif Display', Georgia, serif; font-size: 1rem; color: #c9a84c !important; letter-spacing: .04em; margin: 0; } /* table */ #permissions_control_page .table { color: #e8e3d5 !important; font-family: 'IBM Plex Sans', sans-serif; font-size: .81rem; margin: 0; } #permissions_control_page .table thead th { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: #c9a84c !important; font-weight: 700; border-bottom: 1px solid rgba(201,168,76,.2) !important; background: transparent; padding: .75rem 1rem; white-space: nowrap; } #permissions_control_page .table tbody tr:hover { background: rgba(201,168,76,.04) !important; } #permissions_control_page .table tbody td { border-color: rgba(255,255,255,.05) !important; vertical-align: middle; padding: .65rem 1rem; } /* permission badge */ .pc-badge { display: inline-block; border-radius: 6px; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .2em .6em; } .pc-badge-ok { background: rgba(46,204,138,.1)!important; border: 1px solid rgba(46,204,138,.25)!important; color: #2ecc8a !important; } .pc-badge-warn { background: rgba(224,92,92,.09)!important; border: 1px solid rgba(224,92,92,.2)!important; color: #e05c5c !important; } .pc-badge-gold { background: rgba(201,168,76,.1)!important; border: 1px solid rgba(201,168,76,.25)!important; color: #c9a84c !important; } .pc-badge-muted { background: rgba(255,255,255,.04)!important;border: 1px solid rgba(255,255,255,.1)!important; color: rgba(232,227,213,.5) !important; } /* action buttons */ .pc-btn-grant { display: inline-flex; align-items: center; gap: .25rem; background: rgba(46,204,138,.08) !important; border: 1px solid rgba(46,204,138,.25) !important; border-radius: 6px !important; color: #2ecc8a !important; font-size: .7rem; padding: .22rem .55rem; cursor: pointer; transition: all .14s; } .pc-btn-grant:hover { background: rgba(46,204,138,.18) !important; } .pc-btn-remove { display: inline-flex; align-items: center; gap: .25rem; background: rgba(224,92,92,.08) !important; border: 1px solid rgba(224,92,92,.22) !important; border-radius: 6px !important; color: #e05c5c !important; font-size: .7rem; padding: .22rem .55rem; margin-left: .35rem; cursor: pointer; transition: all .14s; } .pc-btn-remove:hover { background: rgba(224,92,92,.18) !important; } /* add button */ .pc-btn-add { display: inline-flex; align-items: center; gap: .35rem; background: linear-gradient(135deg,#c9a84c,#a8842a) !important; border: none !important; border-radius: 8px !important; color: #0d0f13 !important; font-family: 'IBM Plex Sans', sans-serif; font-size: .73rem; font-weight: 700; letter-spacing: .04em; padding: .36rem .85rem; cursor: pointer; transition: all .15s; box-shadow: 0 3px 12px rgba(201,168,76,.3); } .pc-btn-add:hover { background: linear-gradient(135deg,#e8c96a,#c9a84c) !important; transform: translateY(-1px); } /* granter switch */ .pc-switch-row { display: flex; align-items: center; gap: .55rem; } .pc-switch-row .form-check-input { background-color: rgba(255,255,255,.06) !important; border-color: rgba(201,168,76,.3) !important; } .pc-switch-row .form-check-input:checked { background-color: #c9a84c !important; border-color: #c9a84c !important; } /* loading/empty */ #loading_row td, .pc-loading, .pc-empty { padding: 2.5rem 1rem; text-align: center; }