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

body, h1, h2, h3, h4, h5, h6, p, a, span, div, td, th, li, label, input, select, textarea, button, strong, em, small {
   font-family: 'Prompt', sans-serif !important;
}

body {
   font-family: 'Prompt', sans-serif;
   background: #f0f2f5;
   min-height: 100vh;
}

/* Login Screen */
.login-screen {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   background: linear-gradient(135deg, #1a1a3e 0%, #0d0d2b 100%);
}

.login-card {
   background: #fff;
   padding: 40px;
   border-radius: 16px;
   box-shadow: 0 20px 60px rgba(0,0,0,0.3);
   text-align: center;
   width: 100%;
   max-width: 400px;
}

.login-logo {
   width: 80px;
   height: 80px;
   background: linear-gradient(135deg, #ff1637, #ff4757);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   font-size: 32px;
   color: #fff;
}

.login-card h2 {
   color: #1a1a3e;
   margin-bottom: 5px;
}

.login-card p {
   color: #666;
   margin-bottom: 25px;
}

.login-card .form-group {
   margin-bottom: 20px;
   text-align: left;
}

.login-card label {
   display: block;
   font-weight: 600;
   color: #333;
   margin-bottom: 8px;
}

.login-card input {
   width: 100%;
   padding: 12px 15px;
   border: 2px solid #e0e0e0;
   border-radius: 8px;
   font-size: 16px;
   transition: border-color 0.3s;
}

.login-card input:focus {
   outline: none;
   border-color: #ff1637;
}

.btn-login {
   width: 100%;
   padding: 14px;
   background: linear-gradient(135deg, #ff1637, #ff4757);
   color: #fff;
   border: none;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s;
}

.btn-login:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(255, 22, 55, 0.4);
}

.text-danger {
   color: #ff4757;
   font-size: 13px;
   margin-top: 5px;
   display: block;
}

/* Topbar */
.topbar {
   background: #fff;
   padding: 15px 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-shadow: 0 2px 10px rgba(0,0,0,0.08);
   position: sticky;
   top: 0;
   z-index: 100;
}

.topbar h3 {
   color: #1a1a3e;
   font-size: 20px;
}

.topbar h3 i {
   color: #ff1637;
   margin-right: 8px;
}

.topbar-right {
   display: flex;
   gap: 10px;
}

.btn-compress {
   padding: 8px 16px;
   background: #ff9800;
   color: #fff;
   border: none;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
}

.btn-compress:hover {
   background: #f57c00;
}

.btn-danger {
   padding: 8px 16px;
   background: #9e9e9e;
   color: #fff;
   border: none;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
}

.btn-danger:hover {
   background: #f44336;
}

.btn-compress:hover {
   background: #f57c00;
}

.btn-view-site {
   padding: 8px 16px;
   background: #00bcd4;
   color: #fff;
   border: none;
   border-radius: 6px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
   transition: all 0.3s;
}

.btn-view-site:hover {
   background: #0097a7;
   color: #fff;
}

.btn-logout {
   padding: 8px 16px;
   background: #f44336;
   color: #fff;
   border: none;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
}

.btn-logout:hover {
   background: #d32f2f;
}

/* Dashboard */
.dashboard {
   padding-top: 0;
}

/* Cards */
.card {
   border: none;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0,0,0,0.08);
   margin-top: 20px;
   overflow: hidden;
}

.card-header {
   background: #fff;
   padding: 18px 20px;
   border-bottom: 1px solid #f0f0f0;
}

.card-header h4 {
   color: #1a1a3e;
   font-size: 16px;
   font-weight: 700;
   margin: 0;
}

.card-header h4 i {
   color: #ff1637;
   margin-right: 8px;
}

.badge {
   background: #ff1637;
   color: #fff;
   padding: 2px 10px;
   border-radius: 20px;
   font-size: 12px;
   margin-left: 5px;
}

.card-body {
   padding: 20px;
}

/* Form */
.form-group {
   margin-bottom: 18px;
}

.form-group label {
   display: block;
   font-weight: 600;
   color: #333;
   margin-bottom: 6px;
   font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="url"] {
   width: 100%;
   padding: 10px 14px;
   border: 2px solid #e8e8e8;
   border-radius: 8px;
   font-size: 14px;
   transition: border-color 0.3s;
}

.form-group input:focus {
   outline: none;
   border-color: #ff1637;
}

/* Upload Area */
.upload-area {
   border: 2px dashed #ccc;
   border-radius: 12px;
   padding: 30px 20px;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s;
   background: #fafafa;
}

.upload-area:hover {
   border-color: #ff1637;
   background: #fff5f5;
}

.upload-area.dragover {
   border-color: #ff1637;
   background: #ffebee;
}

.upload-area i {
   font-size: 40px;
   color: #ff1637;
   margin-bottom: 10px;
}

.upload-area p {
   color: #666;
   margin-bottom: 5px;
}

.upload-area small {
   color: #999;
}

/* Image Preview */
.image-preview {
   position: relative;
   margin-top: 10px;
   border-radius: 8px;
   overflow: hidden;
}

.image-preview img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 8px;
   display: block;
}

.btn-remove-img {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 30px;
   height: 30px;
   background: #ff4757;
   color: #fff;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
}

/* Add Button */
.btn-add {
   width: 100%;
   padding: 14px;
   background: linear-gradient(135deg, #ff1637, #ff4757);
   color: #fff;
   border: none;
   border-radius: 8px;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s;
}

.btn-add:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(255, 22, 55, 0.4);
}

/* Portfolio List */
.portfolio-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.portfolio-list::-webkit-scrollbar {
   width: 5px;
}

.portfolio-list::-webkit-scrollbar-thumb {
   background: #ccc;
   border-radius: 5px;
}

.portfolio-list::-webkit-scrollbar-thumb:hover {
   background: #999;
}

.empty-state {
   text-align: center;
   padding: 60px 20px;
   color: #999;
}

.empty-state i {
   font-size: 60px;
   margin-bottom: 15px;
   display: block;
}

.empty-state p {
   font-size: 16px;
}

/* Portfolio Item */
.portfolio-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px 12px;
   background: #fafafa;
   border-radius: 8px;
   transition: all 0.3s;
}

.portfolio-item:hover {
   background: #f0f0f0;
}

.portfolio-item img {
   width: 80px;
   height: 55px;
   object-fit: cover;
   border-radius: 6px;
   flex-shrink: 0;
}

.portfolio-item-info {
   flex: 1;
}

.portfolio-item-info small {
   color: #333;
   font-size: 12px;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 600;
}

.portfolio-item-info .btn-text-badge {
   display: inline-block;
   background: #e8f5e9;
   color: #2e7d32;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
}

.click-count {
   display: inline-block;
   background: #fff3e0;
   color: #e65100;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
   margin-left: 4px;
}

.rank-badge {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 700;
   margin-left: 4px;
   background: #fce4ec;
   color: #c62828;
}

.rank-badge.rank-gold {
   background: linear-gradient(135deg, #ffd54f, #ffb300);
   color: #5d4037;
}

.portfolio-item-actions {
   display: flex;
   gap: 8px;
}

.btn-edit {
   padding: 5px 10px;
   background: #ffc107;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 12px;
}

.btn-delete {
   padding: 5px 10px;
   background: #f44336;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 12px;
}

.btn-edit:hover { background: #ffca28; }
.btn-delete:hover { background: #d32f2f; }

/* Floating Contact Editor */
.floating-edit-card {
   background: #fafafa;
   border-radius: 12px;
   padding: 20px;
   text-align: center;
   margin-bottom: 15px;
}

.floating-edit-icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 10px;
   font-size: 22px;
   color: #fff;
}

.floating-edit-card h5 {
   color: #1a1a3e;
   font-size: 16px;
   margin-bottom: 12px;
}

.floating-edit-card input[type="text"],
.floating-edit-card input[type="url"],
.floating-edit-card input[type="tel"],
.floating-edit-card input[type="email"] {
   width: 100%;
   padding: 8px 12px;
   border: 2px solid #e8e8e8;
   border-radius: 6px;
   font-size: 13px;
   margin-bottom: 8px;
   transition: border-color 0.3s;
}

.floating-edit-card input:focus {
   outline: none;
   border-color: #ff1637;
}

/* Toggle Switch */
.toggle-switch {
   position: relative;
   display: inline-block;
   width: 44px;
   height: 24px;
   margin: 5px 0;
}

.toggle-switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.toggle-slider {
   position: absolute;
   cursor: pointer;
   top: 0; left: 0; right: 0; bottom: 0;
   background: #ccc;
   border-radius: 24px;
   transition: 0.3s;
}

.toggle-slider::before {
   content: '';
   position: absolute;
   height: 18px;
   width: 18px;
   left: 3px;
   bottom: 3px;
   background: #fff;
   border-radius: 50%;
   transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
   background: #ff1637;
}

.toggle-switch input:checked + .toggle-slider::before {
   transform: translateX(20px);
}

.toggle-label {
   font-size: 12px;
   color: #666;
   margin-left: 5px;
}

/* Pagination */
.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 6px;
   margin-top: 15px;
   padding-top: 12px;
   border-top: 1px solid #eee;
}

.pag-btn {
   padding: 6px 12px;
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 6px;
   cursor: pointer;
   font-size: 12px;
   color: #333;
   transition: all 0.3s;
}

.pag-btn:hover:not(:disabled) {
   background: #ff1637;
   color: #fff;
   border-color: #ff1637;
}

.pag-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
}

.pag-num {
   padding: 6px 10px;
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 6px;
   cursor: pointer;
   font-size: 12px;
   color: #333;
   transition: all 0.3s;
}

.pag-num:hover {
   border-color: #ff1637;
   color: #ff1637;
}

.pag-num.active {
   background: #ff1637;
   color: #fff;
   border-color: #ff1637;
}

/* Mobile */
@media (max-width: 768px) {
   .login-card { margin: 20px; padding: 30px; }
   .topbar { flex-direction: column; gap: 10px; }
   .portfolio-item { flex-direction: column; text-align: center; }
   .portfolio-item img { width: 100%; height: 120px; }
}