:root{
  color-scheme: dark;
  --bg:#0B1220;
  --panel:#141E2E;
  --panel-2:#1B2A3E;
  --line:#26374F;
  --ink:#E7ECF1;
  --muted:#8592A0;
  --blue:#4C9FFF;
  --teal:#2DD4BF;
  --red:#E5645A;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
body{font-family:'Inter',-apple-system,Segoe UI,Helvetica,Arial,sans-serif;padding-bottom:64px;}
button, input, select, textarea{font-family:inherit;font-size:inherit;color:inherit;}

.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:16px 24px;background:rgba(11,18,32,0.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
}
.brand{font-family:Georgia,serif;font-weight:600;font-size:18px;letter-spacing:-.01em;}
.brand span{color:var(--blue);}
.new-app-btn{
  margin-left:auto;background:var(--blue);color:#071322;border:none;
  padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
}
.new-app-btn:hover{filter:brightness(1.1);}

.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 0;}
h1{font-family:Georgia,serif;font-weight:600;font-size:24px;margin:0 0 4px;}
.subtitle{color:var(--muted);font-size:14px;margin:0 0 22px;}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.toolbar input[type="text"]{
  flex:1;min-width:200px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;padding:9px 12px;font-size:13px;color:var(--ink);
}

.category-label{
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:26px 0 12px;
}
.category-label:first-of-type{margin-top:0;}

.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}

.app-card{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;text-align:left;text-decoration:none;color:var(--ink);
  display:block;transition:border-color .15s ease, transform .15s ease;
}
.app-card:hover{border-color:var(--blue);transform:translateY(-2px);}
.app-card .icon{font-size:26px;display:block;margin-bottom:10px;}
.app-card .name{font-size:15px;font-weight:600;margin-bottom:4px;}
.app-card .desc{font-size:12px;color:var(--muted);line-height:1.4;}
.app-card .edit-btn{
  position:absolute;top:12px;right:12px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--muted);width:26px;height:26px;border-radius:6px;font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease;
}
.app-card:hover .edit-btn{opacity:1;}
.app-card .edit-btn:hover{border-color:var(--blue);color:var(--ink);}

.empty-state{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px;}

/* ---- Modal ---- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(4,8,14,0.72);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;z-index:100;overflow-y:auto;
}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  max-width:480px;width:100%;padding:26px;
}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:12px;}
.modal-head h2{font-size:19px;margin:0;font-family:Georgia,serif;}
.close-btn{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;}
.close-btn:hover{color:var(--ink);}

.field-row{margin-bottom:14px;}
.field-row label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;}
.field-row input[type="text"], .field-row input[type="number"], .field-row textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:14px;color:var(--ink);
}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field-hint{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4;}

.modal-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:10px;}
.btn{padding:9px 16px;border-radius:8px;font-size:13px;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);}
.btn:hover{border-color:var(--blue);}
.btn.primary{background:var(--blue);color:#071322;border:none;font-weight:600;}
.btn.primary:hover{filter:brightness(1.1);}
.btn.danger{color:var(--red);border-color:var(--red);background:none;}
.btn.danger:hover{background:rgba(229,100,90,0.1);}