/* Self-contained dashboard theme inspired by the main portfolio. */
:root{ --bg:#080809; --bg-soft:#101012; --surface:#171719; --surface-strong:#242426; --text:#f4f4f5; --muted:#98989f; --muted-2:#68686f; --border:rgba(255,255,255,.12); --accent:#ff2d35; --accent-soft:rgba(255,45,53,.14); --danger:#ff7378; --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --radius-sm:8px; --radius-md:14px; --radius-lg:20px; }
*{ box-sizing:border-box; }
html{ min-height:100%; background:var(--bg); }
body{ min-width:320px; min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 84% 0%,rgba(255,45,53,.18),transparent 31rem),linear-gradient(135deg,#080809 0%,#0b0b0d 55%,#120b0d 100%); font:400 .9rem/1.5 var(--body); }
body::before{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; content:''; mask-image:linear-gradient(to bottom,black,transparent 75%); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }
button{ cursor:pointer; }
.site-header{ padding:18px 0 0; }
.nav{ width:min(92vw,1280px); min-height:58px; margin:auto; padding:10px 14px 10px 20px; }
.glass{ border:1px solid var(--border); background:linear-gradient(120deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); box-shadow:0 20px 60px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(18px); }
.admin-nav{ display:block; }
.nav,.nav-actions,.logo{ display:flex; align-items:center; }
.nav{ justify-content:space-between; border-radius:999px; }
.logo{ gap:2px; font:700 1.1rem var(--display); }
.logo .highlight,.highlight{ color:var(--accent); }
.logo small{ margin-left:7px; color:var(--muted); font:600 .67rem var(--body); letter-spacing:.08em; text-transform:uppercase; }
.nav-context{ color:var(--muted); font-size:.78rem; }
.nav-actions{ gap:10px; }
.icon-button{ display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--border); border-radius:50%; background:rgba(255,255,255,.08); color:var(--text); }
.button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:9px 15px; border:1px solid var(--border); border-radius:999px; background:var(--surface-strong); color:var(--text); font-weight:700; transition:.2s ease; }
.button:hover{ border-color:rgba(255,45,53,.6); transform:translateY(-1px); }
.button-primary{ border-color:var(--accent); background:var(--accent); box-shadow:0 10px 25px rgba(255,45,53,.2); }
.web-link{ padding:8px 13px; color:#fff; background:rgba(255,45,53,.13); border-color:rgba(255,45,53,.35); font-size:.78rem; }
.admin-shell{ width:min(92vw,1280px); margin:0 auto; padding:62px 0 70px; }
.login-intro{ text-align:center; margin:10px auto 28px; }
.login-intro i{ display:grid; place-items:center; width:56px; height:56px; margin:0 auto 14px; border-radius:18px; background:var(--accent-soft); color:var(--accent); font-size:1.8rem; }
.login-intro h2{ font:700 1.55rem var(--display); }
.login-intro p{ color:var(--muted); margin-top:5px; }
.admin-header{ margin-bottom:28px; }
.admin-header h1,.dashboard-heading h2,.admin-list-header h2,.login-intro h2{ font-family:var(--display); letter-spacing:-.02em; }
.admin-header h1{ margin:10px 0 4px; font-size:clamp(2rem,4vw,3.2rem); }
.admin-header p,.admin-message{ color:var(--muted); }
.eyebrow{ display:inline-flex; padding:5px 10px; border:1px solid rgba(255,45,53,.4); border-radius:999px; color:#ff858a; background:var(--accent-soft); font-size:.67rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.admin-panel{ padding:32px; border-radius:var(--radius-lg); }
.dashboard-layout{ display:grid; grid-template-columns:220px 1fr; gap:30px; }
.dashboard-sidebar{ min-height:620px; display:flex; flex-direction:column; gap:8px; padding:18px 12px; border-right:1px solid var(--border); }
.sidebar-label{ padding:8px 12px; color:var(--muted-2); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.sidebar-link{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); text-align:left; font-weight:600; }
.sidebar-link:hover,.sidebar-link.is-active{ background:var(--accent-soft); border-color:rgba(255,42,42,.22); color:#fff; }
.sidebar-link i{ font-size:1.05rem; flex-shrink:0; }
.sidebar-link-text{ display:flex; flex-direction:column; gap:1px; line-height:1.25; }
.sidebar-link-text small{ color:var(--muted-2); font-size:.68rem; font-weight:500; }
.sidebar-link.is-active .sidebar-link-text small{ color:rgba(255,255,255,.6); }
.sidebar-button{ font:inherit; }
.sidebar-spacer{ flex:1; }
.sidebar-user{ display:flex; align-items:center; gap:8px; padding:10px 12px; color:var(--muted); font-size:.78rem; overflow:hidden; }
.sidebar-user span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-content{ min-width:0; }
.admin-breadcrumb{ display:flex; align-items:center; gap:6px; margin-bottom:14px; color:var(--muted-2); font-size:.76rem; font-weight:600; letter-spacing:.02em; }
.admin-breadcrumb i{ font-size:.95rem; }
.admin-breadcrumb i.bx-chevron-right{ color:var(--muted-2); font-size:.8rem; }
.admin-breadcrumb #breadcrumb-current{ color:var(--text); }
.dashboard-heading{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.dashboard-heading h2{ margin-top:8px; font-size:1.8rem; }
.dashboard-heading-help{ margin-top:4px; color:var(--muted); font-size:.82rem; max-width:46ch; }
.dashboard-date{ color:var(--muted); font-size:.8rem; }
.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:30px; }
.metric-card{ display:grid; gap:7px; min-height:130px; padding:18px; border-radius:14px; }
.metric-card i{ color:var(--accent); font-size:1.45rem; }
.metric-card span{ color:var(--muted); font-size:.75rem; }
.metric-card strong{ font:700 1.8rem var(--display); }
.metric-cyan i{ color:#4de8ff; }
.project-manager{ padding-top:8px; }
.project-manager > .admin-actions,
.project-manager > hr{ display:none; }
.project-form-panel{ display:none; }
.project-form-panel.is-visible{ display:block; }
.project-list-panel.is-hidden{ display:none; }
.form-mode-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.form-mode-header p{ color:var(--muted); font-size:.82rem; }
.admin-form button[disabled]{ opacity:.45; cursor:not-allowed; filter:grayscale(1); box-shadow:none; }
.dashboard-heading .button{ white-space:nowrap; }
.admin-list-header{ margin-top:36px; }
.admin-link-chip{ display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border:1px solid var(--border); border-radius:6px; color:var(--muted); font-size:.68rem; }
.admin-card-links{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.admin-card-cover .cover-media{ width:100%; height:100%; object-fit:cover; }
.admin-header{ margin-bottom:28px; }
.admin-header p, .admin-message{ color: var(--muted); }
.admin-panel{ padding:32px; border-radius: var(--radius-lg); }
.admin-form{ display:grid; gap:18px; max-width:900px; }
.admin-form label span{ display:block; margin-bottom:7px; color: var(--muted); font-size:.82rem; font-weight:600; }
.admin-form input, .admin-form textarea, .admin-form select{
  width:100%; padding:12px 14px; background: var(--surface-strong);
  border:1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); outline:none;
  transition: border-color .2s, box-shadow .2s;
}
.admin-form textarea{ min-height:110px; resize:vertical; }
.admin-form select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2398989f' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus{ border-color: var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.cover-preview{ display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-elevated); }
.cover-preview .cover-media{ width:150px; height:84px; object-fit:cover; border-radius:8px; }
.cover-preview-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cover-preview-actions small{ color:var(--muted); }
.cover-remove{ padding:8px 11px; color:#ff8a8a; border-color:rgba(255,42,42,.35); }
.admin-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.field-help{ display:block; margin-top:6px; color:var(--muted-2); font-size:.74rem; line-height:1.45; }
.field-help kbd{ padding:1px 6px; border:1px solid var(--border); border-radius:5px; background:var(--surface-strong); font-family:var(--body); font-size:.72rem; }
.checkbox{ display:flex !important; flex-direction:row !important; align-items:center; gap:9px; }
.checkbox span{ margin:0 !important; }
.checkbox input{ width:auto; }

/* Featured toggle (impact-highlighted) */
.featured-toggle{
  align-items:flex-start !important; gap:12px !important; padding:14px 16px; border-radius:var(--radius-md) !important;
  border:1px solid rgba(255,205,90,.35) !important; background:rgba(255,205,90,.07);
}
.featured-toggle input{ margin-top:3px; width:18px; height:18px; accent-color:#ffd45a; flex-shrink:0; }
.featured-toggle-text{ display:flex; flex-direction:column; gap:3px; }
.featured-toggle-text strong{ display:flex; align-items:center; gap:6px; color:#ffd45a; font-size:.9rem; }
.featured-toggle-text small{ color:var(--muted); font-size:.78rem; line-height:1.4; }
.admin-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.hidden{ display:none !important; }
.surface{ border:1px solid var(--border); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); box-shadow:0 15px 35px rgba(0,0,0,.2); }

/* Tag input */
.tag-input{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px;
  background: var(--surface-strong); border:1px solid var(--border); border-radius: var(--radius-sm);
}
.tag-input:focus-within{ border-color: var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag-chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px;
  background: var(--accent-soft); color:#ff8a8a; border-radius: var(--radius-full); font-size:.8rem; font-weight:600;
}
.tag-chip button{ width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background: rgba(255,42,42,.25); color:#fff; font-size:.7rem; }
.tag-chip button:hover{ background: var(--accent); }
.tag-input input{ flex:1; min-width:140px; border:none !important; background:none !important; padding:6px 4px !important; box-shadow:none !important; }
.tag-add{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background: var(--accent); color:#fff; flex-shrink:0; }

/* Dynamic link rows */
#links-builder{ display:grid; gap:10px; }
.link-row{ display:grid; grid-template-columns:170px 1fr auto; gap:10px; align-items:center; }
.link-row select, .link-row input{ margin:0; }
.remove-link{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: var(--surface-strong); border:1px solid var(--border); color: var(--danger); flex-shrink:0;
}
.remove-link:hover{ background: rgba(255,69,58,.15); }
.add-link-button{ justify-self:start; margin-top:4px; padding:9px 16px; font-size:.85rem; }

/* CRUD grid */
.admin-list-header{ display:flex; align-items:center; justify-content:space-between; margin:36px 0 16px; }
.admin-list-header h2{ font-family: var(--display); font-size:1.4rem; }
.admin-grid-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; }
.admin-card{ overflow:hidden; border-radius: var(--radius-md); display:flex; flex-direction:column; }
.admin-card-cover{ aspect-ratio:16/10; background: var(--bg-elevated); overflow:hidden; position:relative; }
.admin-card-cover img{ width:100%; height:100%; object-fit:cover; }
.admin-card-cover .placeholder{ font-size:2rem; }
.admin-order-badge{
  position:absolute; top:8px; left:8px; z-index:1; display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px; background:rgba(8,8,9,.72); border:1px solid rgba(255,255,255,.18);
  color:#fff; font:700 .75rem var(--display); backdrop-filter:blur(6px);
}
.admin-order-badge i{ font-size:.85rem; color:var(--accent); }
.order-controls{
  position:absolute; top:8px; left:8px; z-index:1; display:flex; align-items:center; gap:2px;
  padding:3px; border-radius:999px; background:rgba(8,8,9,.78); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
}
.order-controls button{
  display:grid; place-items:center; width:22px; height:22px; border:0; border-radius:50%;
  background:transparent; color:#fff; font-size:.85rem; transition:.15s ease;
}
.order-controls button:hover:not(:disabled){ background:var(--accent); }
.order-controls button:disabled{ opacity:.3; cursor:not-allowed; }
.order-controls span{ min-width:20px; padding:0 2px; text-align:center; color:#fff; font:700 .75rem var(--display); }
.admin-featured-tag{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:2px;
  padding:3px 9px; border-radius:999px; border:1px solid rgba(255,205,90,.4); background:rgba(255,205,90,.12);
  color:#ffd45a; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.admin-card-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.admin-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.admin-card-category{ color: var(--muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.admin-card h3{ font-size:1.05rem; }
.admin-card-tech{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.admin-card-tech span{ padding:3px 8px; border:1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size:.68rem; }
.admin-card-actions{ display:flex; gap:8px; padding:0 16px 16px; }
.admin-card-actions button{ flex:1; padding:8px; font-size:.8rem; border-radius: var(--radius-sm); }
.admin-card-actions .delete-btn{ color: var(--danger); border-color: rgba(255,69,58,.35); }

@media(max-width:650px){
  .dashboard-layout{ grid-template-columns:1fr; gap:18px; }
  .dashboard-sidebar{ min-height:0; border-right:0; border-bottom:1px solid var(--border); flex-direction:row; flex-wrap:wrap; align-items:center; }
  .sidebar-label,.sidebar-spacer{ display:none; }
  .sidebar-link-text small{ display:none; }
  .sidebar-user{ margin-left:auto; }
  .metric-grid{ grid-template-columns:repeat(2,1fr); }
  .admin-grid{ grid-template-columns:1fr; }
  .admin-panel{ padding:20px; }
  .link-row{ grid-template-columns:1fr; }
}
body:not(.is-authenticated) .site-header{ display:none; }
body:not(.is-authenticated) .admin-shell{ max-width:560px; padding-top:70px; }
body:not(.is-authenticated) .admin-panel{ padding:36px; }
body.is-authenticated .admin-header{ display:none; }
body.is-authenticated .admin-shell{ width:min(96vw,1400px); padding-top:28px; }
body.is-authenticated .admin-panel{ padding:26px; }

@media(max-width:650px){
  .nav{ width:94vw; padding-left:15px; }
  .nav-context{ display:none; }
  .web-link{ font-size:0; width:36px; padding:0; }
  .web-link i{ font-size:1.1rem; }
  .dashboard-layout{ grid-template-columns:1fr; gap:18px; }
  .dashboard-sidebar{ min-height:0; border-right:0; border-bottom:1px solid var(--border); flex-direction:row; flex-wrap:wrap; align-items:center; }
  .sidebar-label,.sidebar-spacer{ display:none; }
  .sidebar-user{ margin-left:auto; }
  .metric-grid{ grid-template-columns:repeat(2,1fr); }
  .admin-grid{ grid-template-columns:1fr; }
  .admin-panel{ padding:20px; }
  .link-row{ grid-template-columns:1fr; }
  .dashboard-heading{ align-items:flex-start; flex-direction:column; }
}

/* Toasts */
.toast-stack{ position:fixed; z-index:999; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; width:min(90vw,340px); }
.toast{
  display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--surface-strong); box-shadow:0 15px 35px rgba(0,0,0,.35);
  color:var(--text); font-size:.85rem; opacity:0; transform:translateY(8px); animation:toast-in .2s ease forwards;
}
.toast i{ font-size:1.15rem; margin-top:1px; }
.toast.toast-success{ border-color:rgba(70,200,120,.4); }
.toast.toast-success i{ color:#54d888; }
.toast.toast-error{ border-color:rgba(255,69,58,.4); }
.toast.toast-error i{ color:var(--danger); }
.toast.toast-info i{ color:#4de8ff; }
.toast.is-leaving{ animation:toast-out .18s ease forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes toast-out{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(8px); } }

/* Confirm modal */
.confirm-overlay{
  position:fixed; inset:0; z-index:998; display:grid; place-items:center;
  background:rgba(6,6,7,.65); backdrop-filter:blur(4px); padding:20px;
}
.confirm-box{ width:min(92vw,380px); padding:26px; border-radius:var(--radius-lg); text-align:center; }
.confirm-box i{ font-size:2rem; color:var(--danger); }
.confirm-box h3{ margin:10px 0 6px; font-family:var(--display); }
.confirm-box p{ color:var(--muted); font-size:.86rem; margin-bottom:18px; }
.confirm-actions{ display:flex; gap:10px; justify-content:center; }
.confirm-actions .button{ flex:1; }
.confirm-danger{ background:var(--danger); border-color:var(--danger); box-shadow:0 10px 25px rgba(255,115,120,.25); }