/* Island Design Style */
:root {
  --bg: #f0f2f5;
  --island: #ffffff;
  --island-shadow: 0 2px 12px rgba(0,0,0,0.08);
  --island-radius: 16px;
  --primary: #4f7cff;
  --primary-hover: #3a66e8;
  --danger: #ff4f4f;
  --danger-hover: #e83a3a;
  --text: #1a1a2e;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --success: #10b981;
  --tag-bg: #eff6ff;
  --tag-color: #3b82f6;
  --tag-info-bg: #f3f4f6;
  --tag-info-color: #6b7280;
  --input-bg: #f9fafb;
  --input-border: #d1d5db;
  --input-focus: #4f7cff;
  --primary-end: #6366f1;
  --gradient-accent: #a78bfa;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Layout */
.layout { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
  width: 220px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
  padding: 24px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.sidebar-logo {
  width:38px; height:38px;
  background: linear-gradient(135deg, var(--primary), var(--gradient-accent));
  border-radius:11px; display:flex; align-items:center; justify-content:center;
  margin-bottom:10px; animation:logoPulse 3s ease-in-out infinite;
}
.sidebar-logo svg { width:22px; height:22px; color:white; }
@keyframes logoPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(79,124,255,0.35); }
  50%      { box-shadow:0 0 0 8px rgba(79,124,255,0); }
}
.sidebar-brand h1 {
  font-size:15px; font-weight:700; line-height:1.4;
  color: var(--primary);
  background: linear-gradient(135deg, var(--primary) 0%, var(--gradient-accent) 50%, var(--primary) 100%);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
.nav-item {
  display:flex; align-items:center; padding:10px 20px; margin:2px 8px;
  border-radius:10px; cursor:pointer; color:var(--text-secondary); font-size:14px;
  font-weight:500; transition:background 0.15s,color 0.15s; gap:10px;
  border:none; background:none; width:calc(100% - 16px); text-align:left;
}
.nav-item:hover { background:var(--bg); color:var(--text); }
.nav-item.active { background:#eff4ff; color:var(--primary); }
.nav-item.theme-toggle { border-top:1px solid var(--border); border-radius:0; margin:0; width:100%; }
.nav-icon { width:18px; height:18px; flex-shrink:0; }

/* Main */
.main { flex:1; padding:28px; overflow:auto; }

/* Loading */
.loading-overlay {
  position:fixed; inset:0; background:rgba(255,255,255,0.65);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.spinner {
  width:36px; height:36px; border:3px solid var(--border);
  border-top-color:var(--primary); border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg);} }

/* Island card */
.island {
  background:var(--island); border-radius:var(--island-radius);
  box-shadow:var(--island-shadow); padding:24px; margin-bottom:24px;
}
.island-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;
}
.island-title { font-size:16px; font-weight:600; color:var(--text); }

/* Table */
.island-table { width:100%; border-collapse:collapse; font-size:13px; }
.island-table th {
  text-align:left; padding:10px 12px; color:var(--text-secondary); font-weight:600;
  font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  border-bottom:2px solid var(--border); white-space:nowrap;
}
.island-table td { padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.island-table tr:last-child td { border-bottom:none; }
.island-table tbody tr:hover td { background:#f9fafb; }
.empty-row td { text-align:center; color:var(--text-secondary); padding:32px!important; }

/* UUID */
.uuid-text {
  cursor:pointer; font-family:monospace; font-size:11px; color:var(--primary);
  background:var(--tag-bg); padding:2px 7px; border-radius:5px;
  transition:background 0.15s; user-select:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:130px; display:inline-block; vertical-align:middle;
}
.uuid-text:hover { background:#dbeafe; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:5px; padding:8px 16px;
  border-radius:8px; font-size:14px; font-weight:500; cursor:pointer;
  border:none; transition:background 0.15s,transform 0.1s;
}
.btn:active { transform:scale(0.97); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-end)); color:white; }
.btn-primary:hover { filter:brightness(1.12); box-shadow:0 4px 14px rgba(79,124,255,0.35); }
.btn-danger { background:transparent; color:var(--danger); padding:4px 8px; font-size:13px; }
.btn-danger:hover { background:#fff1f1; }
.btn-text { background:transparent; color:var(--primary); padding:4px 8px; font-size:13px; }
.btn-text:hover { background:var(--tag-bg); }
.btn-secondary { background:var(--bg); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--border); }

/* Tags */
.tag { display:inline-block; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:500; }
.tag-primary { background:var(--tag-bg); color:var(--tag-color); }
.tag-info { background:var(--tag-info-bg); color:var(--tag-info-color); }
.tag-success { background:#ecfdf5; color:#059669; }

/* Modal */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.3); display:flex;
  align-items:center; justify-content:center; z-index:1000;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:fadeIn 0.15s ease;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal {
  background:rgba(255,255,255,0.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:var(--island-radius);
  box-shadow:0 8px 40px rgba(0,0,0,0.15); width:500px; max-width:95vw;
  max-height:90vh; overflow-y:auto; animation:slideUp 0.2s ease;
}
@keyframes slideUp { from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:rgba(255,255,255,0.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:1;
}
.modal-title { font-size:16px; font-weight:600; }
.modal-close {
  background:none; border:none; cursor:pointer; color:var(--text-secondary);
  font-size:22px; line-height:1; padding:4px; border-radius:6px; transition:background 0.15s;
}
.modal-close:hover { background:var(--bg); }
.modal-body { padding:20px 24px; }
.modal-footer {
  padding:16px 24px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
  position:sticky; bottom:0; background:rgba(255,255,255,0.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}

/* Form */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.form-label.required::after { content:' *'; color:var(--danger); }
.form-input,.form-select {
  width:100%; padding:8px 12px; border:1px solid var(--input-border); border-radius:8px;
  font-size:14px; background:var(--input-bg); color:var(--text);
  transition:border-color 0.15s,box-shadow 0.15s; outline:none;
  font-family:inherit;
}
.form-select {
  appearance:none; -webkit-appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px 12px;
  cursor:pointer;
}
.form-input:focus,.form-select:focus {
  border-color:var(--input-focus); box-shadow:0 0 0 3px rgba(79,124,255,0.12);
}
.form-error { color:var(--danger); font-size:12px; margin-top:4px; }
.form-readonly {
  padding:8px 12px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; font-size:14px; color:var(--text-secondary);
}

/* Toggle */
.toggle-wrap { display:flex; align-items:center; gap:10px; }
.toggle { position:relative; width:40px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; cursor:pointer; inset:0; background:var(--border);
  border-radius:11px; transition:0.2s;
}
.toggle-slider:before {
  position:absolute; content:''; height:16px; width:16px; left:3px; top:3px;
  background:white; border-radius:50%; transition:0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background:var(--primary); }
.toggle input:checked + .toggle-slider:before { transform:translateX(18px); }

/* Toast */
.toast-container {
  position:fixed; top:20px; right:20px; z-index:2000;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  padding:12px 18px; border-radius:10px; font-size:14px; font-weight:500;
  box-shadow:0 4px 16px rgba(0,0,0,0.12); animation:slideInRight 0.25s ease;
  min-width:200px; max-width:320px;
}
@keyframes slideInRight { from{transform:translateX(50px);opacity:0;} to{transform:translateX(0);opacity:1;} }
.toast-success { background:#ecfdf5; color:#065f46; border-left:3px solid #10b981; }
.toast-error { background:#fef2f2; color:#991b1b; border-left:3px solid #ef4444; }

/* Login page */
.login-page {
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.login-island {
  background:var(--island); border-radius:var(--island-radius);
  box-shadow:0 4px 24px rgba(0,0,0,0.10); padding:40px; width:380px; max-width:95vw;
}
.login-logo {
  width:48px; height:48px;
  background: linear-gradient(135deg, var(--primary), var(--gradient-accent));
  border-radius:12px;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  animation: logoPulse 3s ease-in-out infinite;
}
.login-logo svg { width:28px; height:28px; color:white; }
.login-title { font-size:22px; font-weight:700; color:var(--text); margin-bottom:6px; }
.login-subtitle { font-size:14px; color:var(--text-secondary); margin-bottom:28px; }
.login-island .btn-primary { width:100%; justify-content:center; padding:10px; font-size:15px; margin-top:4px; }

/* Sortable table headers */
.th-sortable { cursor:pointer; user-select:none; }
.th-sortable:hover { color:var(--text); }
.sort-icon { margin-left:4px; opacity:0.35; font-size:10px; font-style:normal; }
.th-sortable.sorted .sort-icon { opacity:1; color:var(--primary); }

/* Mono */
.mono { font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size:12px; }
/* Flex spacer */
.flex-spacer { flex:1; }

/* Tab section transition */
.tab-enter-active { animation: tabEnter 0.22s ease; }
@keyframes tabEnter { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* Dark mode */
html.dark-theme {
  --bg: #0f1117;
  --island: #1a1d27;
  --island-shadow: 0 2px 12px rgba(0,0,0,0.5);
  --text: #e8eaf0;
  --text-secondary: #9ca3af;
  --border: #2d3148;
  --tag-bg: #1e2a4a;
  --tag-color: #7fa8f8;
  --tag-info-bg: #252836;
  --tag-info-color: #9ca3af;
  --input-bg: #252836;
  --input-border: #3d4260;
}
html.dark-theme .loading-overlay { background:rgba(15,17,23,0.75); }
html.dark-theme .sidebar { background: rgba(22,25,37,0.85); }
html.dark-theme .modal { background:rgba(22,25,37,0.88); border-color:rgba(255,255,255,0.06); }
html.dark-theme .modal-header { background:rgba(22,25,37,0.88); }
html.dark-theme .modal-footer { background:rgba(22,25,37,0.88); }
html.dark-theme .form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html.dark-theme .island-table tbody tr:hover td { background:#20243a; }
html.dark-theme .nav-item.active { background:#1a2b4a; }
html.dark-theme .uuid-text:hover { background:#1e3058; }
html.dark-theme .btn-danger:hover { background:#3a1010; }
html.dark-theme .tag-success { background:#0d2e1a; color:#34d399; }
html.dark-theme .toast-success { background:#0d2318; color:#6ee7b7; }
html.dark-theme .toast-error { background:#2e0d0d; color:#fca5a5; }

/* Responsive */
@media (max-width:768px) {
  .sidebar {
    width:100%; height:auto; position:static; flex-direction:row;
    flex-wrap:wrap; gap:4px; align-items:center; padding:12px;
  }
  .sidebar-brand { width:100%; margin-bottom:4px; padding-bottom:8px; }
  .nav-item { width:auto; margin:0; }
  .layout { flex-direction:column; }
  .main { padding:16px; }
  .island-table { font-size:12px; }
  .uuid-text { max-width:80px; }
  .modal { width:95vw; }
}