:root {    --bg-dark: #121212;    --bg-darker: #1e1e1e;    --bg-table: #252525;    --text-light: #e0e0e0;    --text-muted: #aaaaaa;    --primary: #03a9f4;    --secondary: #00bcd4;    --success: #4caf50;    --warning: #ff9800;    --danger: #f44336;}body {    background-color: var(--bg-dark);    color: var(--text-light);    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    line-height: 1.6;    margin: 0;    padding: 0;}body.partner-list {    padding: 20px;    max-width: 1600px;    margin: 0 auto;}.login-page {    display: flex;    justify-content: center;    align-items: center;    min-height: 100vh;    margin: 0;}.login-container {    background-color: var(--bg-darker);    border-radius: 8px;    padding: 40px;    box-shadow: 0 4px 20px rgba(0,0,0,0.3);    width: 100%;    max-width: 400px;}.login-page h1 {    color: var(--primary);    text-align: center;    margin-top: 0;    margin-bottom: 30px;}.form-group {    margin-bottom: 20px;}.login-page label {    display: block;    margin-bottom: 8px;    font-weight: 500;}.login-page input {    width: 100%;    padding: 12px;    border: 1px solid #333;    border-radius: 4px;    background-color: #2d2d2d;    color: var(--text-light);    font-size: 16px;    box-sizing: border-box;}.login-page input:focus {    outline: none;    border-color: var(--primary);    box-shadow: 0 0 0 2px rgba(3, 169, 244, 0.3);}.login-page button {    width: 100%;    padding: 14px;    background-color: var(--primary);    color: #121212;    border: none;    border-radius: 4px;    font-size: 16px;    font-weight: 600;    cursor: pointer;    transition: background-color 0.3s;}.login-page button:hover {    background-color: #0288d1;}.error {    color: #cf6679;    text-align: center;    margin-top: 20px;}.header-container {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 30px;    padding-bottom: 15px;    border-bottom: 1px solid #333;}.header-right {    display: flex;    align-items: center;    gap: 20px;}h1 {    color: var(--primary);    margin: 0;}.btn {    display: inline-block;    background-color: var(--primary);    color: #121212;    text-decoration: none;    padding: 12px 24px;    border-radius: 4px;    font-weight: 600;    transition: background-color 0.3s;}.btn:hover {    background-color: #0288d1;}.filter-container {    display: flex;    align-items: center;    gap: 15px;    background-color: #2d2d2d;    border-radius: 4px;    padding: 8px 12px;}.filter-container select {    background: transparent;    border: none;    color: var(--text-light);    padding: 5px;    outline: none;    background-color: #2d2d2d;    color: var(--text-light);    border: 1px solid #333;    border-radius: 4px;}table {    width: 100%;    border-collapse: collapse;    background-color: var(--bg-darker);    border-radius: 8px;    overflow: hidden;    box-shadow: 0 4px 12px rgba(0,0,0,0.25);}th, td {    padding: 16px;    text-align: left;    border-bottom: 1px solid #333;}th {    background-color: var(--bg-table);    color: var(--primary);    font-weight: 600;    cursor: pointer;    user-select: none;}th.sortable:hover {    background-color: #333;}th.sortable .sort-arrows {    display: inline-block;    margin-left: 5px;    font-size: 0.8em;    vertical-align: middle;}tr:hover {    background-color: #2a2a2a;}.status-paid {    color: var(--success);    font-weight: 600;}.status-unpaid {    color: var(--danger);    font-weight: 600;}.status-error {    color: var(--warning);    font-weight: 600;}.status-unknown {    color: #ff9800;     font-weight: 600;}.actions-header {    text-align: right !important;    padding-right: 40px !important; }.actions-cell {    vertical-align: middle !important;    text-align: right !important;}.actions {    display: flex;    gap: 8px;    justify-content: flex-end;    flex-wrap: nowrap;    width: 100%;}table th:last-child,table td:last-child {    width: 250px;     min-width: 250px;    max-width: 250px;}.action-btn {    padding: 8px 12px;    border-radius: 4px;    text-decoration: none;    display: inline-flex;    align-items: center;    transition: background-color 0.3s;    white-space: nowrap;}.view {    background-color: #2d2d2d;    color: var(--primary);}.edit {    background-color: #2d2d2d;    color: var(--secondary);}.delete {    background-color: #2d2d2d;    color: var(--danger);}.action-btn:hover {    background-color: #333;}.empty-row td {    padding: 30px;    text-align: center;    color: var(--text-muted);}.date-with-tooltip {    position: relative;    cursor: help;}.date-with-tooltip:hover::after {    content: attr(data-duration);    position: absolute;    bottom: 100%;    left: 50%;    transform: translateX(-50%);    background: #333;    color: #fff;    padding: 5px;    border-radius: 4px;    white-space: nowrap;    z-index: 100;}.search-box {    display: flex;    align-items: center;    background-color: #2d2d2d;    border-radius: 4px;    padding: 8px 12px;    width: 300px;}.search-box input {    background: transparent;    border: none;    color: var(--text-light);    padding: 5px;    width: 100%;    outline: none;}.search-box input::placeholder {    color: #aaa;}.delete-confirmation {    max-width: 800px;    margin: 0 auto;    padding: 20px;}.delete-confirmation .container {    background-color: var(--bg-darker);    border-radius: 8px;    padding: 25px;    box-shadow: 0 4px 12px rgba(0,0,0,0.25);    text-align: center;}.delete-confirmation h1 {    color: var(--danger);    margin-top: 0;}.delete-confirmation .btn-group {    display: flex;    gap: 15px;    justify-content: center;    margin-top: 30px;}.delete-confirmation .btn {    padding: 12px 24px;    border-radius: 4px;    text-decoration: none;    font-weight: 600;    transition: background-color 0.3s;}.delete-confirmation .btn-danger {    background-color: var(--danger);    color: white;}.delete-confirmation .btn-secondary {    background-color: #333;    color: var(--text-light);}.delete-confirmation .btn:hover {    opacity: 0.9;}.detail-view {    max-width: 1400px;    margin: 0 auto;    padding: 20px;}.detail-view .view-header {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 20px;    padding: 15px;    background-color: #1e1e1e;    border-radius: 8px;}.detail-view .view-header h1 {    margin: 0;    flex-grow: 1;    text-align: center;    color: var(--primary);    border-bottom: none;    padding-bottom: 0;}.detail-view .view-header .btn {    background-color: var(--primary);    color: #121212;    padding: 10px 15px;    border-radius: 4px;    text-decoration: none;    font-weight: 600;    transition: background-color 0.3s;    white-space: nowrap;}.detail-view .view-header .btn:hover {    background-color: #0288d1;}.detail-view .container {    background-color: var(--bg-darker);    border-radius: 8px;    padding: 25px;    box-shadow: 0 4px 12px rgba(0,0,0,0.25);}.detail-view .detail-group {    display: grid;    grid-template-columns: 180px 1fr 40px;    align-items: center;    gap: 15px;    margin-bottom: 20px;}.detail-view .detail-group label {    font-weight: 500;    color: #aaa;}.detail-view .detail-group .value-container {    padding: 10px;    background-color: #2d2d2d;    border-radius: 4px;    min-height: 40px;    display: flex;    align-items: center;    overflow: hidden;}.detail-view .copy-btn {    width: 40px;    height: 40px;    padding: 0;    display: flex;    align-items: center;    justify-content: center;    background-color: var(--primary);    color: #121212;    border: none;    border-radius: 4px;    cursor: pointer;    transition: background-color 0.3s;}.detail-view .copy-btn:hover {    background-color: #0288d1;}.detail-view .copy-icon {    width: 18px;    height: 18px;}.detail-view .copy-feedback {    position: fixed;    top: 20px;    right: 20px;    background-color: #2d2d2d;    border: 1px solid var(--primary);    color: var(--primary);    padding: 15px 25px;    border-radius: 4px;    display: none;    z-index: 1000;    box-shadow: 0 4px 12px rgba(0,0,0,0.25);}.detail-view .copy-feedback.show {    display: block;    animation: fadeOut 5s forwards;}@keyframes fadeOut {    0% { opacity: 1; ;}   70% { opacity: 1; ;}   100% { opacity: 0; display: none; }}.detail-view a {    color: var(--primary);    text-decoration: none;}.detail-view a:hover {    text-decoration: underline;}.detail-view .action-buttons {    display: flex;    gap: 15px;    margin-top: 30px;}.detail-view .action-buttons .btn {    background-color: var(--primary);    color: #121212;    padding: 12px 20px;    border-radius: 4px;    text-decoration: none;    font-weight: 600;    transition: background-color 0.3s;    display: inline-flex;    align-items: center;}.detail-view .action-buttons .btn:hover {    background-color: #0288d1;}.detail-view .action-buttons .btn.edit {    background-color: #00bcd4;}.detail-view .action-buttons .btn.edit:hover {    background-color: #0097a7;}.detail-view .btn-terminate {    background-color: var(--danger);    color: #121212;}.detail-view .btn-terminate:hover {    background-color: #d32f2f;}.edit-form {    max-width: 1400px;    margin: 0 auto;    padding: 20px;}.edit-form .form-header {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 20px;    padding: 15px;    background-color: #1e1e1e;    border-radius: 8px;}.edit-form .form-header h1 {    margin: 0;    flex-grow: 1;    text-align: center;    color: var(--primary);    border-bottom: none;    padding-bottom: 0;}.edit-form .form-header .btn {    background-color: var(--primary);    color: #121212;    padding: 10px 15px;    border-radius: 4px;    text-decoration: none;    font-weight: 600;    transition: background-color 0.3s;    white-space: nowrap;}.edit-form .form-header .btn:hover {    background-color: #0288d1;}.edit-form .form-header .btn.view {    background-color: #00bcd4;}.edit-form .form-header .btn.view:hover {    background-color: #0097a7;}.edit-form .container {    background-color: var(--bg-darker);    border-radius: 8px;    padding: 25px;    box-shadow: 0 4px 12px rgba(0,0,0,0.25);}.edit-form .form-group {    margin-bottom: 20px;}.edit-form label {    display: block;    margin-bottom: 8px;    font-weight: 500;}.edit-form input,.edit-form textarea,.edit-form select {    width: 100%;    padding: 10px;    border: 1px solid #333;    border-radius: 4px;    background-color: #2d2d2d;    color: var(--text-light);    font-size: 16px;}.edit-form input:focus,.edit-form textarea:focus {    outline: none;    border-color: var(--primary);    box-shadow: 0 0 0 2px rgba(3, 169, 244, 0.3);}.edit-form .form-buttons {    display: flex;    gap: 10px;    flex-wrap: wrap;}.edit-form .btn-save {    background-color: var(--primary);    color: #121212;}.edit-form .btn-save-continue {    background-color: var(--success);    color: #121212;}.edit-form .btn-cancel {    background-color: var(--danger);    color: #121212;}.edit-form .btn-save:hover {    background-color: #0288d1;}.edit-form .btn-save-continue:hover {    background-color: #3d8b40;}.edit-form .btn-cancel:hover {    background-color: #d32f2f;}.edit-form .form-buttons button,.edit-form .form-buttons .btn {    padding: 12px 24px;    border: none;    border-radius: 4px;    cursor: pointer;    font-size: 16px;    font-weight: 600;    transition: background-color 0.3s;}.modal {    display: none;    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0,0,0,0.7);    z-index: 1000;}.modal-content {    background-color: var(--bg-darker);    margin: 10% auto;    padding: 25px;    width: 40%;     border-radius: 8px;    box-shadow: 0 4px 20px rgba(0,0,0,0.5);}.modal h2 {    margin-top: 0;    color: var(--primary);}.modal textarea {    background-color: #2d2d2d;    border: 1px solid #333;    color: #e0e0e0;    border-radius: 4px;    padding: 10px;    min-height: 60px;     resize: vertical;    width: 100%;    font-family: inherit;}@media (max-width: 768px) {    .hidden-mobile {        display: none;    ;}       .actions {        flex-direction: column;    ;}       .filter-container {        flex-direction: column;        width: 100%;    ;}       .search-box {        width: 100%;    ;}   .edit-form .form-buttons {        flex-direction: column;    ;}       .edit-form .form-buttons button,    .edit-form .form-buttons .btn {        width: 100%;        margin-bottom: 10px;    ;}       .detail-view .detail-group {        grid-template-columns: 1fr;    ;}       .detail-view .copy-btn {        margin-top: 10px;    ;}       .modal-content {        width: 90%;    ;}           table th:last-child,    table td:last-child {        width: auto;        min-width: auto;        max-width: none;    ;}       .actions-header {        padding-right: 16px !important;        text-align: center !important;    }}.status-loading {    display: none; }@keyframes spin {    to { transform: rotate(360deg); }}