.apps-grid { gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.app-card { --app-tint:#168b90; padding:18px; gap:14px; border-radius:16px; background:color-mix(in srgb,var(--app-tint) 7%,var(--card)); box-shadow:0 3px 12px var(--shadow-color); grid-template-rows:auto 1fr auto; }
:is(.app-card,.apps-side-card)[data-color="blue"] { --app-tint:#397be0; }
:is(.app-card,.apps-side-card)[data-color="violet"] { --app-tint:#8b63d9; }
:is(.app-card,.apps-side-card)[data-color="amber"] { --app-tint:#c98a20; }
:is(.app-card,.apps-side-card)[data-color="rose"] { --app-tint:#cd5c87; }
:is(.app-card,.apps-side-card)[data-color="slate"] { --app-tint:#708399; }
.app-card:hover { background:color-mix(in srgb,var(--app-tint) 12%,var(--card)); border-color:color-mix(in srgb,var(--app-tint) 45%,var(--line)); }
.app-card-title { display:flex; align-items:center; gap:12px; min-width:0; }
.app-card h3 { font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.app-card-icon { width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:grid; place-items:center; font-size:23px; font-weight:700; color:var(--txt); background:color-mix(in srgb,var(--app-tint) 18%,var(--card)); }
.app-card p { font-size:13px; }
.app-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.app-card-details,.app-card-drag { width:32px; height:32px; min-width:32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--dim); }
.app-card-drag { cursor:grab; touch-action:none; font-size:24px; }
.app-card-drag:active { cursor:grabbing; }
.app-card-drag:disabled { cursor:default; opacity:.35; }
.app-card-details:hover,.app-card-drag:hover { background:var(--neutral-soft); color:var(--txt); }
.app-drop-target { outline:3px solid var(--accent); outline-offset:2px; }
#app-appearance { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.app-appearance-fields { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.app-appearance-fields label { display:grid; gap:6px; flex:1 1 130px; }
.app-appearance-fields select { width:100%; min-width:0; padding:8px; background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:8px; }
@media (max-width:640px) { .app-card-details,.app-card-drag { width:44px; height:44px; min-width:44px; } }

.apps-side-card { --app-tint:#168b90; background:color-mix(in srgb,var(--app-tint) 7%,var(--card)); }
.apps-side-card:hover { background:color-mix(in srgb,var(--app-tint) 12%,var(--card)); }
.apps-side-card.active { background:color-mix(in srgb,var(--app-tint) 16%,var(--card)); border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
.apps-side-card .apps-side-icon { width:30px; height:30px; flex:0 0 30px; font-size:18px; border-radius:8px; color:var(--txt); }