:root{

    --bg:#f5f7fb;
    --card:#ffffff;
    --text:#111827;
    --text-light:#6b7280;

    --primary:#2563eb;

    --border:#e5e7eb;

    --shadow:
    0 10px 30px rgba(0,0,0,.06);

}

body.dark{

    --bg:#0f172a;
    --card:#1e293b;
    --text:#f8fafc;
    --text-light:#94a3b8;
    --border:#334155;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter',sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

}

.layout{

    max-width:1400px;

    margin:auto;

    padding:30px;

}

.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.header h1{

    font-size:32px;

    font-weight:800;

}

.header p{

    margin-top:6px;

    color:var(--text-light);

}

.header-actions button{

    width:48px;

    height:48px;

    border:none;

    cursor:pointer;

    border-radius:14px;

    background:var(--card);

    box-shadow:var(--shadow);

}

.upload-section{

    margin-bottom:30px;

}

.upload-card{

    background:var(--card);

    border:2px dashed var(--primary);

    border-radius:28px;

    padding:50px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

}

.upload-card:hover{

    transform:translateY(-3px);

}

.upload-icon{

    font-size:56px;

    margin-bottom:15px;

}

.upload-card h2{

    font-size:28px;

    margin-bottom:10px;

}

.upload-card p{

    color:var(--text-light);

}

.upload-card button{

    margin-top:20px;

    padding:14px 24px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:white;

    cursor:pointer;

    font-weight:600;

}

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:30px;

}

.stat-card{

    background:var(--card);

    border-radius:24px;

    padding:24px;

    box-shadow:var(--shadow);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-4px);

}

.stat-top{

    display:flex;

    justify-content:flex-end;

    margin-bottom:15px;

}

.stat-top span{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eff6ff;

    font-size:22px;

}

.stat-card h2{

    font-size:34px;

    margin-bottom:6px;

}

.stat-card p{

    color:var(--text-light);

}

.content-card{

    background:var(--card);

    border-radius:28px;

    box-shadow:var(--shadow);

    padding:24px;

}

.tabs{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:20px;

}

.tab{

    border:none;

    padding:12px 20px;

    border-radius:14px;

    cursor:pointer;

    background:#f3f4f6;

    font-weight:600;

}

body.dark .tab{

    background:#334155;

    color:white;

}

.tab.active{

    background:var(--primary);

    color:white;

}

.toolbar{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:20px;

}

.toolbar input{

    flex:1;

    min-width:250px;

}

.toolbar input,
.toolbar select{

    height:48px;

    border:1px solid var(--border);

    border-radius:14px;

    padding:0 15px;

    background:var(--card);

    color:var(--text);

}

.toolbar button{

    height:48px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    background:var(--primary);

    color:white;

    font-weight:600;

}

.table-wrapper{

    overflow:auto;

}

table{

    width:100%;

    border-collapse:collapse;

}

thead{

    background:#f8fafc;

}

body.dark thead{

    background:#334155;

}

th{

    text-align:left;

    padding:18px;

    font-size:14px;

}

td{

    padding:18px;

    border-top:1px solid var(--border);

}

.status{

    padding:8px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.status-not{

    background:#fff7ed;

    color:#ea580c;

}

.status-fans{

    background:#fce7f3;

    color:#db2777;

}

.status-mutual{

    background:#dcfce7;

    color:#16a34a;

}

.action-buttons{

    display:flex;

    gap:10px;

}

.action-buttons button,
.action-buttons a{

    border:none;

    text-decoration:none;

    padding:10px 14px;

    border-radius:10px;

    background:var(--primary);

    color:white;

    cursor:pointer;

    font-size:14px;

}

.pagination{

    margin-top:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}

.pagination button{

    border:none;

    padding:12px 18px;

    border-radius:12px;

    background:var(--primary);

    color:white;

    cursor:pointer;

}

#toast{

    position:fixed;

    bottom:30px;

    right:30px;

    background:#111827;

    color:white;

    padding:14px 18px;

    border-radius:12px;

    opacity:0;

    pointer-events:none;

    transition:.3s;

}

#toast.show{

    opacity:1;

}

#loadingOverlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.4);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999;

}

.loader-card{

    background:white;

    padding:40px;

    border-radius:24px;

    text-align:center;

}

.spinner{

    width:60px;

    height:60px;

    border:5px solid #ddd;

    border-top:5px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto auto 20px;

}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@media(max-width:768px){

    .layout{
        padding:15px;
    }

    .header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .upload-card{
        padding:30px 20px;
    }

    .upload-card h2{
        font-size:22px;
    }

    .stat-card h2{
        font-size:28px;
    }

    table{
        min-width:700px;
    }

}

img { max-width: 100%; }

@media (max-width: 1024px) {
  .layout {
    padding: 20px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar input {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .layout {
    padding: 14px;
  }

  .header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    display: flex;
    justify-content: flex-end;
  }

  .header h1 {
    font-size: 28px;
  }

  .upload-card {
    padding: 28px 18px;
    border-radius: 20px;
  }

  .upload-icon {
    font-size: 42px;
  }

  .upload-card h2 {
    font-size: 22px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stat-card {
    padding: 18px;
    border-radius: 18px;
  }

  .stat-card h2 {
    font-size: 24px;
  }

  .content-card {
    padding: 16px;
    border-radius: 20px;
  }

  .tabs {
    gap: 8px;
  }

  .tab {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 0;
    padding: 10px 12px;
    font-size: 14px;
  }

  .toolbar {
    flex-direction: column;
  }

  .toolbar input,
  .toolbar select,
  .toolbar button {
    width: 100%;
  }

  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 640px;
  }

  th,
  td {
    padding: 14px 12px;
    font-size: 14px;
  }

  .action-buttons {
    flex-wrap: wrap;
  }

  .action-buttons button,
  .action-buttons a {
    flex: 1 1 auto;
    text-align: center;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pagination button {
    flex: 1 1 140px;
  }

  #toast {
    right: 14px;
    left: 14px;
    bottom: 14px;
    text-align: center;
  }

  .loader-card {
    width: min(92vw, 320px);
    padding: 28px 20px;
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 24px;
  }

  .upload-card button,
  .toolbar button,
  .pagination button,
  .header-actions button {
    min-height: 44px;
  }

  .tab {
    flex: 1 1 100%;
  }

  .stat-top span {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .stat-card h2 {
    font-size: 22px;
  }
}


img { max-width: 100%; }

@media (max-width: 1024px) {
  .layout {
    padding: 20px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar input {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .layout {
    padding: 14px;
  }

  .header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    display: flex;
    justify-content: flex-end;
  }

  .header h1 {
    font-size: 28px;
  }

  .upload-card {
    padding: 28px 18px;
    border-radius: 20px;
  }

  .upload-icon {
    font-size: 42px;
  }

  .upload-card h2 {
    font-size: 22px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stat-card {
    padding: 18px;
    border-radius: 18px;
  }

  .stat-card h2 {
    font-size: 24px;
  }

  .content-card {
    padding: 16px;
    border-radius: 20px;
  }

  .tabs {
    gap: 8px;
  }

  .tab {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 0;
    padding: 10px 12px;
    font-size: 14px;
  }

  .toolbar {
    flex-direction: column;
  }

  .toolbar input,
  .toolbar select,
  .toolbar button {
    width: 100%;
  }

  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 640px;
  }

  th,
  td {
    padding: 14px 12px;
    font-size: 14px;
  }

  .action-buttons {
    flex-wrap: wrap;
  }

  .action-buttons button,
  .action-buttons a {
    flex: 1 1 auto;
    text-align: center;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pagination button {
    flex: 1 1 140px;
  }

  #toast {
    right: 14px;
    left: 14px;
    bottom: 14px;
    text-align: center;
  }

  .loader-card {
    width: min(92vw, 320px);
    padding: 28px 20px;
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 24px;
  }

  .upload-card button,
  .toolbar button,
  .pagination button,
  .header-actions button {
    min-height: 44px;
  }

  .tab {
    flex: 1 1 100%;
  }

  .stat-top span {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .stat-card h2 {
    font-size: 22px;
  }
}


img { max-width: 100%; }

@media (max-width: 1024px) {
  .layout {
    padding: 20px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar input {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .layout {
    padding: 14px;
  }

  .header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    display: flex;
    justify-content: flex-end;
  }

  .header h1 {
    font-size: 28px;
  }

  .upload-card {
    padding: 28px 18px;
    border-radius: 20px;
  }

  .upload-icon {
    font-size: 42px;
  }

  .upload-card h2 {
    font-size: 22px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stat-card {
    padding: 18px;
    border-radius: 18px;
  }

  .stat-card h2 {
    font-size: 24px;
  }

  .content-card {
    padding: 16px;
    border-radius: 20px;
  }

  .tabs {
    gap: 8px;
  }

  .tab {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 0;
    padding: 10px 12px;
    font-size: 14px;
  }

  .toolbar {
    flex-direction: column;
  }

  .toolbar input,
  .toolbar select,
  .toolbar button {
    width: 100%;
  }

  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 640px;
  }

  th,
  td {
    padding: 14px 12px;
    font-size: 14px;
  }

  .action-buttons {
    flex-wrap: wrap;
  }

  .action-buttons button,
  .action-buttons a {
    flex: 1 1 auto;
    text-align: center;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pagination button {
    flex: 1 1 140px;
  }

  #toast {
    right: 14px;
    left: 14px;
    bottom: 14px;
    text-align: center;
  }

  .loader-card {
    width: min(92vw, 320px);
    padding: 28px 20px;
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 24px;
  }

  .upload-card button,
  .toolbar button,
  .pagination button,
  .header-actions button {
    min-height: 44px;
  }

  .tab {
    flex: 1 1 100%;
  }

  .stat-top span {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .stat-card h2 {
    font-size: 22px;
  }
}


.pagination {
  width: 100%;
}

.pagination button {
  min-width: 110px;
}

#pageInfo {
  text-align: center;
  min-width: 120px;
}

@media (max-width: 768px) {
  .pagination {
    justify-content: stretch;
    align-items: stretch;
  }

  .pagination button {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
  }

  #pageInfo {
    order: -1;
    width: 100%;
    min-width: 0;
    padding: 4px 0;
  }
}

@media (max-width: 480px) {
  .pagination {
    flex-direction: column;
  }

  .pagination button {
    flex: none;
  }
}


/* --- Button interaction effects --- */

button,
a.action-link {
  transition: background .18s, box-shadow .18s, transform .12s, opacity .18s;
}

.upload-card button:hover,
.toolbar button:hover,
.pagination button:hover,
.header-actions button:hover,
.tab:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(37,99,235,.18);
  transform: translateY(-1px);
}

.upload-card button:active,
.toolbar button:active,
.pagination button:active,
.header-actions button:active,
.tab:active {
  filter: brightness(0.94);
  box-shadow: none;
  transform: translateY(0);
}

.action-buttons button:hover,
.action-buttons a:hover {
  filter: brightness(1.12);
  box-shadow: 0 3px 10px rgba(37,99,235,.2);
  transform: translateY(-1px);
}

.action-buttons button:active,
.action-buttons a:active {
  filter: brightness(0.93);
  box-shadow: none;
  transform: translateY(0);
}

.tab.active:hover {
  filter: brightness(1.08);
  transform: none;
}

/* --- Search bar fix --- */

.toolbar {
  flex-wrap: nowrap;
  align-items: center;
}

@media (max-width: 768px) {
  .toolbar {
    flex-wrap: wrap;
  }

  .toolbar input {
    flex: 1 1 100%;
    width: 100%;
  }

  .toolbar select {
    flex: 1 1 auto;
    min-width: 100px;
  }

  .toolbar button {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  .toolbar input,
  .toolbar select,
  .toolbar button {
    flex: 1 1 100%;
    width: 100%;
  }
}


@media (max-width: 768px) {
  .toolbar input {
    min-height: 54px;
    padding: 0 18px;
    font-size: 16px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .toolbar input {
    min-height: 56px;
    padding: 0 18px;
    font-size: 16px;
    border-radius: 16px;
  }
}


@media (max-width: 768px) {
  .toolbar select {
    min-height: 54px;
    padding: 0 18px;
    font-size: 16px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .toolbar select {
    min-height: 56px;
    padding: 0 18px;
    font-size: 16px;
    border-radius: 16px;
  }
}