:root{
  --bg:#0f1115;
  --panel:#15161a;
  --muted:#9aa0a6;
  --accent:#f5b950;
  --card:#121315;
  --glass: rgba(255,255,255,0.03);
  --input-bg: rgba(255,255,255,0.03);
  --input-border: rgba(255,255,255,0.06);
  --input-text: var(--muted);
  --gap: 18px;
  --max-width:1100px;
  --container-padding:28px;
  /* To‑Do widget removed */
}
*{box-sizing:border-box}
html,body,#projects{height:100%}
body{
  margin:0;
  font-family: 'Fira Sans', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.02), transparent), linear-gradient(180deg,var(--bg), #0b0c0e);
  color:#e6e9ed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:28px;
}
.app{max-width:var(--max-width);margin:0 auto;padding:var(--container-padding)}
.topbar{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.logo{font-weight:700;font-size:18px;color:var(--accent)}
.subtitle{color:var(--muted);font-size:13px}

/* Responsive helpers */
@media (max-width:900px){
  :root{ --gap:14px; --container-padding:20px }
  .topbar{align-items:center;gap:12px}
  .subtitle{font-size:12px}
}
@media (max-width:520px){
  :root{ --gap:12px; --container-padding:12px }
  .topbar{flex-wrap:wrap}
  .subtitle{flex-basis:100%;margin-top:6px}
  body{padding:var(--container-padding)}
}

.content{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--gap)}

.admin{margin-bottom:18px}
.form{background:var(--card);padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:8px;border:1px solid rgba(255,255,255,0.03)}
.form input, .form textarea, .form select, .form input[type="file"],
input:not([type]), input[type="text"], input[type="password"], input[type="search"], textarea, select, .edit-input{
  background: var(--input-bg);
  border:1px solid var(--input-border);
  padding:8px;border-radius:6px;color:var(--input-text);font-size:13px
}
.form textarea{min-height:64px}
.form-actions{display:flex;gap:8px}
.form button{background:var(--accent);border:none;padding:8px 12px;border-radius:6px;color:#111;font-weight:600;cursor:pointer}
.form button#clearBtn{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}

.card-actions{display:flex;gap:8px;margin-top:8px}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 8px;border-radius:6px;font-size:13px;cursor:pointer}
.btn.danger{border-color:rgba(255,80,80,0.18);color:#ff9b9b}
.btn.primary{background:var(--accent);color:#111;border:none}

.edit-input{width:100%;padding:6px;border-radius:6px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);margin-bottom:6px}

/* focus styles for inputs */
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, select:focus, .edit-input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
}

/* search clear button position tweaks */
#searchClear{ display:none }
.controls { position: relative }
#searchActions{ position:absolute; right:10px; top:50%; transform:translateY(-50%); display:flex; gap:6px; align-items:center }
#searchActions .spinner{ vertical-align: middle }

/* modal styles */
.modal{position:fixed;inset:0;align-items:center;justify-content:center;z-index:60}
/* respect the native [hidden] attribute so modal stays hidden until opened */
.modal[hidden]{display:none !important}
.modal:not([hidden]){display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6)}
.modal-box{position:relative;z-index:70;width:720px;max-width:95%;background:var(--card);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.modal:not([hidden]){display:flex}
/* position the new-project modal a bit higher on larger screens */
#modal:not([hidden]) .modal-box { align-self:flex-start; margin-top:40px; }
@media (max-width:520px){
  .modal-box{width:100%;max-width:100%;height:60vh;border-radius:12px 12px 0 0;align-self:flex-end}
  .modal{align-items:flex-end}
}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-box .form{margin:0}

/* Make modal headers visually consistent with card titles */
.modal-header h3{
  margin:0;
  font-size:15px;
  font-weight:600;
  color: inherit;
}

/* highlight matched terms in search */
.hl { background: rgba(245,185,80,0.14); padding: 0 3px; border-radius:3px; }

.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,0.12);border-top-color:var(--accent);display:inline-block;vertical-align:middle;margin-right:8px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.error-banner{background:linear-gradient(180deg, rgba(255,20,20,0.12), rgba(255,20,20,0.06));border:1px solid rgba(255,80,80,0.16);color:#ffd6d6;padding:10px;border-radius:8px;margin-bottom:12px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), var(--panel);
  border:1px solid rgba(255,255,255,0.03);
  padding:14px;border-radius:10px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 6px 20px rgba(2,6,23,0.6);
  transition:transform .14s ease,box-shadow .14s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.8)}
.thumb{width:84px;height:84px;border-radius:8px;flex:0 0 84px;overflow:hidden;background:var(--glass);display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.meta{flex:1;min-width:0}
.title{font-weight:600;margin:0 0 6px 0;font-size:15px}
.desc{color:var(--muted);font-size:13px;margin:0}

.empty{padding:28px;background:var(--card);border-radius:8px;color:var(--muted);text-align:center}
.footer{color:var(--muted);font-size:12px;margin-top:18px}

@media (max-width:520px){
  body{padding:12px}
  .thumb{width:64px;height:64px;flex:0 0 64px}
  .card{padding:12px;gap:10px}
  .title{font-size:14px}
}

/* To‑Do widget styles */
/* To‑Do widget styles removed */

/* Theme classes (override root variables) */
.theme-dark{
  --bg:#0f1115;
  --panel:#15161a;
  --muted:#9aa0a6;
  --accent:#f5b950;
  --card:#121315;
  --glass: rgba(255,255,255,0.03);
  color-scheme: dark;
}
/* solar theme removed per request */
/* Dracula */
.theme-dracula{
  --bg: #282a36;
  --panel: #44475a;
  --muted: #f8f8f2;
  --accent: #ff79c6;
  --card: #373844;
  --glass: rgba(255,255,255,0.03);
  color-scheme: dark;
}

/* Nord */
.theme-nord{
  --bg: #2e3440;
  --panel: #3b4252;
  --muted: #d8dee9;
  --accent: #88c0d0;
  --card: #434c5e;
  --glass: rgba(255,255,255,0.03);
  color-scheme: dark;
}

/* theme-specific input backgrounds */
.theme-dark, .theme-dracula, .theme-nord {
  --input-bg: rgba(255,255,255,0.03);
  --input-border: rgba(255,255,255,0.06);
  --input-text: var(--muted);
}

/* high contrast theme inputs */
.theme-contrast{
  --input-bg: #111111;
  --input-border: #ffffff;
  --input-text: #ffffff;
}