@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@400;500&display=swap');

:root {
  --bg: #ffffff;
  --bg-hover: #f0f0f0;
  --bg-active: #f4f0ff;
  --surface: #f9f9f9;
  --text: #000000;
  --text-muted: #777777;
  --text-muted2: #8a05ff;
  --border: #e0e0e0;
  --primary: #000000;
  --primary-invert: #ffffff;
  --bg-purple: #8a05ff;
  --danger: #ec2020;
  --success: #10b981;
  --text-white: #ffffff;
  --text-black-white: #ffffff;
  --text-white-black: #000000;
  --del-btn-bg: #af1d27;
  --del-btn-bg-hover: #63080e;
  --del-btn-text-hover: #ffffff;
  --radius: 0px;
  --font-main: 'Poppins', sans-serif;
  --font-code: 'Google Sans Code', monospace;
}

[data-theme="dark"] {
  --bg: #0d0d0d;
  --bg-hover: #272727;
  --bg-active: #2a0052;
  --surface: #141414;
  --text: #ffffff;
  --text-muted: #888888;
  --text-muted2: #e7dbff;
  --border: #4d4d4d;
  --primary: #ffffff;
  --text-white: #ffffff;
  --text-black-white: #000000;
  --text-white-black: #ffffff;
  --del-btn-bg: #e23642;
  --del-btn-bg-hover: #f4b3b7;
  --del-btn-text-hover: #000000;
  --primary-invert: #000000;
  --bg-purple: #8a05ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); font-weight: 400; }
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--surface); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--surface); }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
.hidden { display: none !important; }

/* Buttons */
button { background: var(--primary); color: var(--primary-invert); border: 1px solid var(--primary); padding: 8px 11px; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: none; font-size: 0.9rem; }
button:hover { background: var(--bg-purple); color: var(--text-white); border-color: var(--bg-purple); }
button.outline { background: transparent; color: var(--text); border-color: var(--border); }
button.outline:hover { border-color: var(--primary); background-color: var(--primary); color: var(--primary-invert); }
button.text { background: transparent; color: var(--text-muted); border: none; padding: 4px 4px; }
button.text:hover { color: var(--text); }
button.nav-danger { background: transparent; color: var(--text);}
button.nav-danger:hover { color: var(--text); }
button.danger { background: var(--del-btn-bg) !important; color: var(--del-btn-text-hover) !important; border-color: var(--del-btn-bg) !important; }
button.danger:hover { background: var(--del-btn-bg-hover) !important; color: var(--del-btn-text-hover) !important; border-color: var(--del-btn-bg-hover) !important; }
.copy-url-btn { 
  background: var(--surface); 
  border: 1px solid var(--border); 
  color: var(--text-muted); 
  padding: 4px; 
  border-radius: var(--radius); 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.1rem; 
}

.copy-url-btn:hover { 
  background: var(--primary); 
  border-color: var(--primary); 
  color: var(--primary-invert); 
}
/* Inputs & Forms */
.input-label { font-size:0.8rem; color:var(--text-muted); margin-bottom:5px; display:block; }
.helper-text { font-size: 0.75rem; color: var(--text-muted); margin-top:-10px; margin-bottom: 20px; line-height: 1.4; }
.error-text { color: var(--danger); font-size: 0.8rem; margin-top: -10px; margin-bottom: 15px; display: block; font-weight: 500;}
.code-font { font-family: var(--font-code) !important; font-size: 0.85rem !important; }

input, select, textarea { width: 100%; padding: 10px 14px; margin-bottom: 15px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); outline: none; font-family: var(--font-main); resize: vertical; transition: none;}
input:focus, select:focus, textarea:focus { border-color: var(--text); }

.input-error { border-color: var(--danger) !important; background-color: rgba(236, 32, 32, 0.05) !important; }

.readonly-input { background: var(--bg) !important; color: var(--text-muted) !important; cursor: default; }
.readonly-input:focus { border-color: var(--border); }

.input-with-icon { position: relative; display: flex; align-items: center; margin-bottom: 15px; }
.input-with-icon input { margin-bottom: 0; padding-right: 40px; font-family: var(--font-code); font-size: 0.9rem; letter-spacing: 1px;}
.input-with-icon button { position: absolute; right: 5px; background: transparent; border: none; color: var(--text-muted); padding: 5px; box-shadow: none; }
.input-with-icon button:hover { color: var(--text); }

.tag-input-container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 6px 10px 6px 6px; margin-bottom: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: text; transition: border-color 0.2s; min-height: 42px; }
.tag-input-container:focus-within { border-color: var(--text); }
.tags-wrapper { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { background: var(--bg); border: 1px solid var(--border); padding: 4px 4px 4px 8px; font-size: 0.8rem; font-family: var(--font-code); display: flex; align-items: center; gap: 6px; color: var(--text); }
.tag-chip button { background: transparent; border: none; border-left: 1px solid var(--border); color: var(--text-muted); padding: 0px 0px 0px 4px; margin: 0px; font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s; }
.tag-chip button:hover { color: var(--text); }
.tag-input-container input { border: none !important; background: transparent !important; outline: none !important; padding: 4px 0 !important; margin-bottom: 0 !important; flex: 1; min-width: 120px; font-family: var(--font-code); font-size: 0.85rem; }

/* Layout & Nav */
.full-center { flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; width: 100%; padding: 20px;}
.logo { font-size: 1.5rem; font-weight: 600; letter-spacing: -1px; }
.logo span { color: var(--text-muted); font-weight: 300; }
.standard-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 4%; height: 65px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 100;}

/* Dashboard Layout */
.dashboard-layout { display: flex; height: 100vh; overflow: hidden; width: 100%; background: var(--bg); }
.sidebar { width: 280px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; height: 100vh; overflow-y: auto; transition: transform 0.3s ease; z-index: 950;}
.sidebar-header { height: 65px; min-height: 65px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10;}
.sidebar-content { padding: 15px; display: flex; flex-direction: column; gap: 20px;}
.sidebar h3 { font-family: var(--font-code); font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; letter-spacing: 1px; }

/* Dynamic Nested Sidebar Navigation */
.side-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.side-list .nav-item { padding: 0; display: flex; flex-direction: column; align-items: stretch; background: transparent !important; border: 1px solid transparent; border-radius: var(--radius); }

.nav-header { padding: 8px 12px; border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--text); transition: none; font-size: 0.9rem; }
.nav-header-label { display: flex; align-items: center; gap: 8px; }
.project-icon-badge { display: inline-flex; align-items: center; justify-content: center; color: var(--proj-icon-color, var(--primary)); vertical-align: middle; }
.nav-header:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active .nav-header { background: var(--bg-active); color: var(--text-muted2); }

/* Left Border on Sub Menu */
.sub-menu { list-style: none; display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin-left: 18px; padding-left: 4px; border-left: 1px solid var(--border); }
.nav-item.active .sub-menu { max-height: 150px; margin-top: 4px; margin-bottom: 4px; }

.sub-menu li { padding: 8px 12px; font-size: 0.9rem; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: var(--radius); transition: none; }
.sub-menu li:hover { background: var(--bg-hover); color: var(--text); }

.sidebar-key-info { display: flex; flex-direction: column; min-width: 0; flex: 1; margin-right: 5px; }
.sidebar-key-info .key-name { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-key-info .key-string { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;}
.sidebar-btn-wrap { display: flex; gap: 5px; flex-shrink: 0;}
.sidebar-action-btn { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 6px 12px; justify-content: flex-start; margin-top: 5px; }
.sidebar-action-btn:hover { border-color: var(--primary); background-color: var(--primary); color: var(--primary-invert); }

.main-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.dash-header { height: 65px; min-height: 65px; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; border-bottom: 1px solid var(--border); background: var(--bg); z-index: 100; position: sticky; top:0; }
.main-content { flex: 1; padding: 40px; background: var(--bg); overflow-y: auto; scroll-behavior: smooth; }

.user-dropdown-wrapper { position: relative; display: inline-block; }
.avatar-btn { 
  width: 38px; 
  height: 38px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: #000000 !important; 
  border: 1px solid var(--border) !important; 
  cursor: pointer; 
  color: #ffffff; 
  padding: 0; 
  overflow: hidden; 
}

.avatar-btn:hover { 
  background: #000000 !important; 
  border-color: var(--text-muted) !important; 
  opacity: 0.8; 
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.user-dropdown { position: absolute; right: 0; top: 120%; width: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: none; z-index: 1000; overflow: hidden; padding: 10px !important;}
.user-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item { width: 100%; text-align: left; background: transparent; border: none; padding: 8px 12px; border-radius: 0; color: var(--text); font-size: 0.9rem; font-weight: 300; justify-content: flex-start; gap: 10px;}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
.dropdown-item.danger:hover { background: var(--bg-hover); color: var(--text);  }

/* Dashboard Full-Page Views (Animations removed, Width Fixed) */
.dashboard-view { display: none; }
.dashboard-view.active { display: block; }

.view-header { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.view-header h2 { margin: 0; font-weight: 500; font-size: 1.6rem; letter-spacing: -0.5px; }

/* FIX: Ensure inputs are constrained, but views stay full page */
.form-section { max-width: 650px; width: 100%; } 
.form-group { margin-bottom: 25px; }
.form-group.row { display: flex; gap: 20px; }
.form-group.row > div { flex: 1; }

.info-card { padding: 25px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 25px; }

/* Dashboard Sections Offset */
#section-stats, #section-upload, #section-assets { scroll-margin-top: 15px; }

.stats { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap;}
.stat-box { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); flex: 1; min-width: 150px; background: transparent; }
.stat-box h4 { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 400; margin-bottom: 5px;}
.stat-box span { font-size: 1.8rem; font-weight: 500; display: block;}

.filter-banner { background: transparent; padding: 12px 20px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--text);}
.upload-box { border: 1px dashed var(--border); padding: 40px 20px; text-align: center; border-radius: var(--radius); cursor: pointer; transition: none; margin-bottom: 30px; background: transparent;}
.upload-box:hover { border-color: var(--text-muted);}
.upload-box.dragover { background: var(--bg); border-color: var(--primary);}
.upload-box ion-icon { font-size: 2.5rem; color: var(--text-muted); margin-bottom: 10px; transition: none; --ionicon-stroke-width: 16px; }
.upload-box.dragover ion-icon { color: var(--primary); }

code, pre { font-family: var(--font-code); font-size: 0.85rem; }

/* Tables */
.table-container { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow-x: auto; width: 100%;}
table { width: 100%; border-collapse: collapse; text-align: left; table-layout: auto;}
th, td { padding: 15px 20px; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: middle; white-space: nowrap;}
th { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; font-weight: 500; background: var(--surface);}
tr { transition: background 0.2s;}
tr:hover { background: var(--surface); }
tr:last-child td { border-bottom: none; }

.clickable-img { cursor: pointer; transition: transform 0.2s, opacity 0.2s; }
.clickable-img:hover { opacity: 0.8; transform: scale(1.05); }

.asset-link { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-family: var(--font-code); font-size: 0.85rem; background: var(--surface); padding: 4px 8px; border-radius: var(--radius); border: 1px solid var(--border); transition: none; }
.asset-link:hover { color: var(--text); border-color: var(--text-muted); text-decoration: none;}

.vis-badge { padding: 4px 12px; border-radius: var(--radius); font-size: 0.8rem; font-weight: 500; text-transform: capitalize; cursor: pointer; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-invert); display: inline-flex; align-items: center; gap: 5px; transition: none; }
.vis-badge:hover { background: var(--bg-purple); border-color: var(--bg-purple); color: var(--text-white);}
.status-badge { font-size:0.75rem; border: 1px solid var(--success); color:var(--success); padding:2px 8px; border-radius:12px; font-weight:500; background: transparent; }

.action-btn { font-weight: 500; background-color: var(--primary); border: 1px solid var(--primary); color: var(--text-black-white); padding: 8px; display: inline-flex; transition: none;}
.action-btn:hover { background: var(--bg-purple); color: var(--text-white); border-color: var(--bg-purple); }
.action-btn.danger:hover { background: var(--danger); color: white; border-color: var(--danger); }

/* Toasts */
#toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; }
.toast { background: var(--primary); color: var(--primary-invert); padding: 12px 20px; border-radius: var(--radius); font-size: 0.9rem; animation: slideIn 0.3s ease; display: flex; align-items: center; gap: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.toast.error { background: var(--danger); color: white; }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); display: none; justify-content: center; align-items: center; z-index: 1000; opacity: 0; transition: none;}
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content { background: var(--bg); padding: 30px; border-radius: var(--radius); width: 100%; max-width: 440px; border: 1px solid var(--border); transform: scale(0.95); transition: none; position: relative;}
.modal-overlay.active .modal-content { transform: scale(1); }
.modal-close-btn { position: absolute; top: 15px; right: 15px; font-size: 1.2rem; color: var(--text-muted); padding: 4px 4px; z-index: 10;}
.modal-close-btn:hover { background: var(--surface); color: var(--text); }
#confirmModal { z-index: 1200; }

/* Image Preview Modal Specifics */
.preview-layout { display: flex; flex-wrap: wrap; height: calc(90vh - 60px); }
.preview-img-container { flex: 1; min-width: 300px; background: #000; display: flex; justify-content: center; align-items: center; padding: 20px; overflow-y: auto;}
.preview-img-container img { max-width: 100%; max-height: 100%; object-fit: contain;}
.preview-img-container pre { width: 100%; max-height: 100%; margin: 0; padding: 16px; background: #111; color: #e0e0e0; font-family: var(--font-code); font-size: 0.8rem; line-height: 1.5; overflow: auto; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--border); border-radius: var(--radius); }
.asset-icon-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-muted); font-size: 1.4rem; cursor: pointer; }
.asset-icon-preview:hover { color: var(--text); background: var(--border); }

/* Asset toolbar & view modes */
.asset-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.asset-toolbar-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  width: auto;
  max-width: 100%;
}
.view-mode-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}
.asset-toolbar-actions .input-with-icon {
  margin-bottom: 0;
  width: 260px;
  max-width: 260px;
  flex: 0 0 auto;
}
.view-mode-btn { background: var(--surface); border: none; padding: 10px 11px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; font-size: 1.1rem; }
.view-mode-btn:hover { background: var(--bg-hover); color: var(--text); }
.view-mode-btn.active { background: var(--primary); color: var(--primary-invert); }

/* Asset grid view */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; overflow: visible; }
.asset-grid-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: visible; background: var(--surface); transition: box-shadow 0.2s; position: relative; }
.asset-grid-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.asset-grid-preview { height: 140px; background: #000; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.asset-grid-meta { padding: 12px; display: flex; flex-direction: column; gap: 6px; overflow: visible; }
.asset-grid-name { font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-grid-type { font-size: 0.7rem; color: var(--text-muted); }
.asset-grid-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; overflow: visible; position: relative; }

/* Asset list view */
.asset-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; overflow: visible; }
.asset-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); flex-wrap: wrap; overflow: visible; position: relative; }
.asset-list-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.asset-list-icon { font-size: 1.5rem; color: var(--text-muted); flex-shrink: 0; }
.asset-list-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asset-list-name { font-weight: 500; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-list-sub { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-list-stats { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Remove z-index: 10 here! This stops the stacking context trap so the dropdown can float above EVERYTHING */
.asset-menu-wrap { 
  position: relative; 
  z-index: auto; 
}

.menu-trigger-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}

.menu-trigger-btn:hover { 
  color: var(--text); 
  border-color: var(--text-muted); 
  background: var(--surface); 
}

.asset-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 190px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 9999; /* Increased z-index */
  overflow: hidden;
  text-align: left;
}

.asset-dropdown.asset-dropdown-floating {
  position: fixed;
  top: 0;
  left: auto;
  right: auto;
  z-index: 9999; /* Ensure fixed dropdown is above all other elements */
}

.asset-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: none;
}
.asset-menu-item ion-icon { flex-shrink: 0; font-size: 1rem; }
.asset-menu-item:hover { background: var(--surface); color: var(--text); border: none; }
.asset-menu-item.danger { color: var(--danger); }
.asset-menu-item.danger:hover { background: var(--surface); color: var(--danger); }
.empty-assets-msg { text-align: center; padding: 40px; color: var(--text-muted); grid-column: 1 / -1; }

.checkbox-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.95rem; }
.checkbox-row input { width: auto; margin: 0; }

.preview-meta-container { width: 350px; padding: 20px; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 15px; overflow-y: auto; max-height: 100%; }

/* Skeletons */
.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius); color: transparent !important; border: none !important; }
.skeleton * { visibility: hidden; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-text { width: 150px; height: 1.5rem; display: inline-block; border-radius: 0px; }
.sk-stat { width: 80px; height: 2.2rem; display: block; border-radius: 0px; margin-top: 5px; }
.sk-row { width: 100%; height: 20px; display: block; border-radius: 0px; }
.sk-img { width: 40px; height: 40px; border-radius: 0px; display: block; }

.mobile-only { display: none !important; }

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
  .mobile-only { display: inline-flex !important; }
  .dash-header { padding: 0 20px; }
  .main-content { padding: 20px; }
  
  #mobile-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); z-index: 900; opacity: 0; visibility: hidden; transition: 0.3s; }
  #mobile-sidebar-overlay.active { opacity: 1; visibility: visible; }
  
  .sidebar { position: fixed; top: 0; left: -280px; height: 100vh; z-index: 950; box-shadow: 5px 0 15px rgba(0,0,0,0.1); }
  .sidebar.open { transform: translateX(280px); }
  
  .preview-layout { height: auto; }
  .preview-img-container { min-height: 250px; }
  .preview-meta-container { width: 100%; border-left: none; border-top: 1px solid var(--border); overflow-y: visible; max-height: none;}
  
  /* Views Responsiveness */
  .form-group.row { flex-direction: column; gap: 0; }
  .view-header h2 { font-size: 1.3rem; }
  .asset-toolbar h3 { flex: 1 1 100%; }
  .asset-toolbar-actions {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .asset-toolbar-actions .input-with-icon { width: min(220px, 55vw); max-width: none; flex: 1 1 auto; }
  .asset-list-row { flex-direction: column; align-items: flex-start; max-width: 100%; }
  .asset-list-main { max-width: 100%; }
  .asset-list-stats { width: 100%; justify-content: space-between; }
  .asset-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* Modern iOS-Style Toggle Switch */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  cursor: pointer;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 25px;
  transition: border-color 0.2s, background-color 0.2s;
}

.toggle-row:hover {
  border-color: var(--text-muted);
}

.toggle-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.toggle-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.toggle-switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}

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

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border);
  transition: 0.3s;
  border-radius: 30px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--success); /* Turns green when active */
}

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

/* Icon Picker Styles */
.icon-picker-dropdown-container {
  position: relative;
  display: flex;
}

.icon-dropdown-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  cursor: pointer;
  transition: 0.2s;
  padding: 0;
}

.icon-dropdown-trigger:hover {
  background: var(--surface-hover);
  border-color: var(--text-muted);
}

.icon-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  padding: 15px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.icon-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.icon-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.2s;
  padding: 0;
}

.icon-color-swatch:hover {
  transform: scale(1.1);
}

.icon-color-swatch.active {
  border-color: var(--text);
  transform: scale(1.25);
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 10px;
  max-height: 180px;
  overflow-y: auto;
  padding: 5px;
  border-top: 1px solid var(--border);
  padding-top: 15px;
}

.icon-pick-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  transition: 0.2s;
  padding: 0;
}

.icon-pick-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.icon-pick-btn.active {
  background: var(--primary);
  color: var(--primary-invert);
  border-color: var(--primary);
}

#clear-filter-btn:hover {
    background-color: var(--text) !important;
    border-color: var(--primary);
}